From c6151fe1ae82f8aff132a1e3d422ed4ae4dc22a0 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Mon, 5 Feb 2024 10:50:43 +0000 Subject: [PATCH] Update theme files --- public/themes/arya-blue/theme.css | 4618 ++++++++++++++++ public/themes/arya-green/theme.css | 4618 ++++++++++++++++ public/themes/arya-orange/theme.css | 4618 ++++++++++++++++ public/themes/arya-purple/theme.css | 4618 ++++++++++++++++ public/themes/aura-dark-amber/theme.css | 4632 ++++++++++++++++- public/themes/aura-dark-blue/theme.css | 4632 ++++++++++++++++- public/themes/aura-dark-cyan/theme.css | 4632 ++++++++++++++++- public/themes/aura-dark-green/theme.css | 4632 ++++++++++++++++- public/themes/aura-dark-indigo/theme.css | 4632 ++++++++++++++++- public/themes/aura-dark-lime/theme.css | 4632 ++++++++++++++++- public/themes/aura-dark-noir/theme.css | 4632 ++++++++++++++++- public/themes/aura-dark-pink/theme.css | 4632 ++++++++++++++++- public/themes/aura-dark-purple/theme.css | 4632 ++++++++++++++++- public/themes/aura-dark-teal/theme.css | 4632 ++++++++++++++++- public/themes/aura-light-amber/theme.css | 4632 ++++++++++++++++- public/themes/aura-light-blue/theme.css | 4632 ++++++++++++++++- public/themes/aura-light-cyan/theme.css | 4632 ++++++++++++++++- public/themes/aura-light-green/theme.css | 4632 ++++++++++++++++- public/themes/aura-light-indigo/theme.css | 4632 ++++++++++++++++- public/themes/aura-light-lime/theme.css | 4632 ++++++++++++++++- public/themes/aura-light-noir/theme.css | 4632 ++++++++++++++++- public/themes/aura-light-pink/theme.css | 4632 ++++++++++++++++- public/themes/aura-light-purple/theme.css | 4632 ++++++++++++++++- public/themes/aura-light-teal/theme.css | 4632 ++++++++++++++++- public/themes/bootstrap4-dark-blue/theme.css | 4618 ++++++++++++++++ .../themes/bootstrap4-dark-purple/theme.css | 4618 ++++++++++++++++ public/themes/bootstrap4-light-blue/theme.css | 4618 ++++++++++++++++ .../themes/bootstrap4-light-purple/theme.css | 4618 ++++++++++++++++ public/themes/fluent-light/theme.css | 4618 ++++++++++++++++ public/themes/lara-dark-amber/theme.css | 4618 ++++++++++++++++ public/themes/lara-dark-blue/theme.css | 4618 ++++++++++++++++ public/themes/lara-dark-cyan/theme.css | 4618 ++++++++++++++++ public/themes/lara-dark-green/theme.css | 4618 ++++++++++++++++ public/themes/lara-dark-indigo/theme.css | 4618 ++++++++++++++++ public/themes/lara-dark-pink/theme.css | 4618 ++++++++++++++++ public/themes/lara-dark-purple/theme.css | 4618 ++++++++++++++++ public/themes/lara-dark-teal/theme.css | 4618 ++++++++++++++++ public/themes/lara-light-amber/theme.css | 4618 ++++++++++++++++ public/themes/lara-light-blue/theme.css | 4618 ++++++++++++++++ public/themes/lara-light-cyan/theme.css | 4618 ++++++++++++++++ public/themes/lara-light-green/theme.css | 4618 ++++++++++++++++ public/themes/lara-light-indigo/theme.css | 4618 ++++++++++++++++ public/themes/lara-light-pink/theme.css | 4618 ++++++++++++++++ public/themes/lara-light-purple/theme.css | 4618 ++++++++++++++++ public/themes/lara-light-teal/theme.css | 4618 ++++++++++++++++ public/themes/luna-amber/theme.css | 4618 ++++++++++++++++ public/themes/luna-blue/theme.css | 4618 ++++++++++++++++ public/themes/luna-green/theme.css | 4618 ++++++++++++++++ public/themes/luna-pink/theme.css | 4618 ++++++++++++++++ public/themes/md-dark-deeppurple/theme.css | 4618 ++++++++++++++++ public/themes/md-dark-indigo/theme.css | 4618 ++++++++++++++++ public/themes/md-light-deeppurple/theme.css | 4618 ++++++++++++++++ public/themes/md-light-indigo/theme.css | 4618 ++++++++++++++++ public/themes/mdc-dark-deeppurple/theme.css | 4618 ++++++++++++++++ public/themes/mdc-dark-indigo/theme.css | 4618 ++++++++++++++++ public/themes/mdc-light-deeppurple/theme.css | 4618 ++++++++++++++++ public/themes/mdc-light-indigo/theme.css | 4618 ++++++++++++++++ public/themes/mira/theme.css | 4618 ++++++++++++++++ public/themes/nano/theme.css | 4618 ++++++++++++++++ public/themes/nova-accent/theme.css | 4618 ++++++++++++++++ public/themes/nova-alt/theme.css | 4618 ++++++++++++++++ public/themes/nova-vue/theme.css | 4618 ++++++++++++++++ public/themes/nova/theme.css | 4618 ++++++++++++++++ public/themes/rhea/theme.css | 4618 ++++++++++++++++ public/themes/saga-blue/theme.css | 4618 ++++++++++++++++ public/themes/saga-green/theme.css | 4618 ++++++++++++++++ public/themes/saga-orange/theme.css | 4618 ++++++++++++++++ public/themes/saga-purple/theme.css | 4618 ++++++++++++++++ public/themes/soho-dark/theme.css | 4618 ++++++++++++++++ public/themes/soho-light/theme.css | 4618 ++++++++++++++++ public/themes/tailwind-light/theme.css | 4618 ++++++++++++++++ public/themes/vela-blue/theme.css | 4618 ++++++++++++++++ public/themes/vela-green/theme.css | 4618 ++++++++++++++++ public/themes/vela-orange/theme.css | 4618 ++++++++++++++++ public/themes/vela-purple/theme.css | 4618 ++++++++++++++++ public/themes/viva-dark/theme.css | 4618 ++++++++++++++++ public/themes/viva-light/theme.css | 4618 ++++++++++++++++ 77 files changed, 355726 insertions(+), 140 deletions(-) diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index 964a9e09e..fcc138548 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -438,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 1px #93cbf9; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #121212; border: 1px solid #383838; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -847,6 +1320,52 @@ background: #2396f2; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #64B5F6; } @@ -889,6 +1408,14 @@ border-color: #ef9a9a; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -907,6 +1434,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #121212; border: 1px solid #383838; @@ -1035,6 +1657,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1105,6 +1813,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1118,6 +1927,30 @@ background-color: #383838; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1173,6 +2006,15 @@ border-color: #ef9a9a; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1286,6 +2128,61 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1369,6 +2266,112 @@ border-color: #ef9a9a; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #121212; border: 1px solid #383838; @@ -1518,6 +2521,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1544,6 +2574,36 @@ background: #C5E1A5; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1628,6 +2688,22 @@ background: #2396f2; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1703,6 +2779,44 @@ border-color: #ef9a9a; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #383838; border: 0 none; @@ -1745,6 +2859,66 @@ border-color: #64B5F6; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #121212; border: 1px solid #383838; @@ -1825,6 +2999,21 @@ background-color: #383838; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1888,6 +3077,74 @@ border-color: #ef9a9a; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #212529; background: #64B5F6; @@ -2359,6 +3616,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2440,6 +3774,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2453,6 +3820,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2499,6 +3936,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2922,6 +4594,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -2994,6 +4704,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3034,6 +4797,46 @@ box-shadow: 0 0 0 1px #93cbf9; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3116,6 +4919,40 @@ color: rgba(255, 255, 255, 0.87); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3188,6 +5025,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #64B5F6; border-radius: 50%; @@ -3213,6 +5161,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #383838; background: #1e1e1e; @@ -3303,6 +5333,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3501,6 +5700,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #383838; @@ -3602,6 +5818,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #383838; background: #1e1e1e; @@ -3647,6 +5882,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3671,6 +5967,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #383838; padding: 1rem; @@ -3726,6 +6042,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; @@ -3738,6 +6110,66 @@ box-shadow: 0 0 0 1px #93cbf9; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #383838; background: #1e1e1e; @@ -3762,6 +6194,76 @@ background: #383838; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #383838; @@ -3821,6 +6323,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1e1e1e; border: 1px solid #383838; @@ -3832,6 +6354,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3880,6 +6472,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3948,6 +6677,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3990,6 +6789,159 @@ border-top-color: #383838; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4033,6 +6985,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #383838; color: rgba(255, 255, 255, 0.87); @@ -4053,6 +7060,50 @@ border-bottom-color: #383838; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4117,6 +7168,38 @@ border-color: #2396f2; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #1e1e1e; border: 1px solid #383838; @@ -4150,6 +7233,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -4244,6 +7369,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4311,6 +7542,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #1e1e1e; @@ -4493,6 +7885,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #1e1e1e; @@ -4582,6 +7993,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #1e1e1e; @@ -4759,6 +8276,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4918,6 +8468,59 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4964,6 +8567,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #383838; @@ -5005,6 +8648,55 @@ color: #64B5F6; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5102,6 +8794,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5154,6 +8866,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5238,6 +8999,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5323,6 +9157,290 @@ color: #73000c; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5437,6 +9555,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5483,6 +9675,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #383838; border-radius: 3px; @@ -5508,6 +9739,39 @@ border: 2px solid #1e1e1e; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #64B5F6; color: #212529; @@ -5550,10 +9814,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #383838; color: rgba(255, 255, 255, 0.87); @@ -5589,6 +9887,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -5605,6 +9921,43 @@ box-shadow: 0 0 0 1px #93cbf9; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5665,6 +10018,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5681,6 +10141,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5726,6 +10212,67 @@ stroke: #6d5100; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5748,6 +10295,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5756,6 +10335,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #64B5F6; color: #212529; @@ -5791,6 +10386,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index 1e6708870..cbac4314d 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -438,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 1px #a7d8a9; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #121212; border: 1px solid #383838; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -847,6 +1320,52 @@ background: #54b358; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #81C784; } @@ -889,6 +1408,14 @@ border-color: #ef9a9a; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -907,6 +1434,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #121212; border: 1px solid #383838; @@ -1035,6 +1657,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1105,6 +1813,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1118,6 +1927,30 @@ background-color: #383838; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1173,6 +2006,15 @@ border-color: #ef9a9a; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1286,6 +2128,61 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1369,6 +2266,112 @@ border-color: #ef9a9a; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #121212; border: 1px solid #383838; @@ -1518,6 +2521,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1544,6 +2574,36 @@ background: #C5E1A5; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1628,6 +2688,22 @@ background: #54b358; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1703,6 +2779,44 @@ border-color: #ef9a9a; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #383838; border: 0 none; @@ -1745,6 +2859,66 @@ border-color: #81C784; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #121212; border: 1px solid #383838; @@ -1825,6 +2999,21 @@ background-color: #383838; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1888,6 +3077,74 @@ border-color: #ef9a9a; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #212529; background: #81C784; @@ -2359,6 +3616,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2440,6 +3774,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2453,6 +3820,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2499,6 +3936,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2922,6 +4594,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -2994,6 +4704,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3034,6 +4797,46 @@ box-shadow: 0 0 0 1px #a7d8a9; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3116,6 +4919,40 @@ color: rgba(255, 255, 255, 0.87); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3188,6 +5025,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #81C784; border-radius: 50%; @@ -3213,6 +5161,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #383838; background: #1e1e1e; @@ -3303,6 +5333,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3501,6 +5700,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #383838; @@ -3602,6 +5818,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #383838; background: #1e1e1e; @@ -3647,6 +5882,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3671,6 +5967,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #383838; padding: 1rem; @@ -3726,6 +6042,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; @@ -3738,6 +6110,66 @@ box-shadow: 0 0 0 1px #a7d8a9; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #383838; background: #1e1e1e; @@ -3762,6 +6194,76 @@ background: #383838; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #383838; @@ -3821,6 +6323,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1e1e1e; border: 1px solid #383838; @@ -3832,6 +6354,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3880,6 +6472,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3948,6 +6677,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3990,6 +6789,159 @@ border-top-color: #383838; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4033,6 +6985,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #383838; color: rgba(255, 255, 255, 0.87); @@ -4053,6 +7060,50 @@ border-bottom-color: #383838; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4117,6 +7168,38 @@ border-color: #54b358; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #1e1e1e; border: 1px solid #383838; @@ -4150,6 +7233,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -4244,6 +7369,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4311,6 +7542,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #1e1e1e; @@ -4493,6 +7885,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #1e1e1e; @@ -4582,6 +7993,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #1e1e1e; @@ -4759,6 +8276,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4918,6 +8468,59 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4964,6 +8567,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #383838; @@ -5005,6 +8648,55 @@ color: #81C784; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5102,6 +8794,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5154,6 +8866,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5238,6 +8999,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5323,6 +9157,290 @@ color: #73000c; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5437,6 +9555,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5483,6 +9675,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #383838; border-radius: 3px; @@ -5508,6 +9739,39 @@ border: 2px solid #1e1e1e; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #81C784; color: #212529; @@ -5550,10 +9814,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #383838; color: rgba(255, 255, 255, 0.87); @@ -5589,6 +9887,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -5605,6 +9921,43 @@ box-shadow: 0 0 0 1px #a7d8a9; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5665,6 +10018,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5681,6 +10141,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5726,6 +10212,67 @@ stroke: #6d5100; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5748,6 +10295,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5756,6 +10335,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #81C784; color: #212529; @@ -5791,6 +10386,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index 0ee41c7d9..69a31be3a 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -438,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 1px #ffe284; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #121212; border: 1px solid #383838; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -847,6 +1320,52 @@ background: #ffc50c; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #FFD54F; } @@ -889,6 +1408,14 @@ border-color: #ef9a9a; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -907,6 +1434,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #121212; border: 1px solid #383838; @@ -1035,6 +1657,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1105,6 +1813,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1118,6 +1927,30 @@ background-color: #383838; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1173,6 +2006,15 @@ border-color: #ef9a9a; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1286,6 +2128,61 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1369,6 +2266,112 @@ border-color: #ef9a9a; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #121212; border: 1px solid #383838; @@ -1518,6 +2521,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1544,6 +2574,36 @@ background: #C5E1A5; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1628,6 +2688,22 @@ background: #ffc50c; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1703,6 +2779,44 @@ border-color: #ef9a9a; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #383838; border: 0 none; @@ -1745,6 +2859,66 @@ border-color: #FFD54F; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #121212; border: 1px solid #383838; @@ -1825,6 +2999,21 @@ background-color: #383838; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1888,6 +3077,74 @@ border-color: #ef9a9a; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #212529; background: #FFD54F; @@ -2359,6 +3616,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2440,6 +3774,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2453,6 +3820,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2499,6 +3936,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2922,6 +4594,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -2994,6 +4704,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3034,6 +4797,46 @@ box-shadow: 0 0 0 1px #ffe284; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3116,6 +4919,40 @@ color: rgba(255, 255, 255, 0.87); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3188,6 +5025,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #FFD54F; border-radius: 50%; @@ -3213,6 +5161,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #383838; background: #1e1e1e; @@ -3303,6 +5333,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3501,6 +5700,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #383838; @@ -3602,6 +5818,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #383838; background: #1e1e1e; @@ -3647,6 +5882,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3671,6 +5967,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #383838; padding: 1rem; @@ -3726,6 +6042,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; @@ -3738,6 +6110,66 @@ box-shadow: 0 0 0 1px #ffe284; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #383838; background: #1e1e1e; @@ -3762,6 +6194,76 @@ background: #383838; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #383838; @@ -3821,6 +6323,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1e1e1e; border: 1px solid #383838; @@ -3832,6 +6354,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3880,6 +6472,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3948,6 +6677,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3990,6 +6789,159 @@ border-top-color: #383838; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4033,6 +6985,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #383838; color: rgba(255, 255, 255, 0.87); @@ -4053,6 +7060,50 @@ border-bottom-color: #383838; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4117,6 +7168,38 @@ border-color: #ffc50c; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #1e1e1e; border: 1px solid #383838; @@ -4150,6 +7233,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -4244,6 +7369,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4311,6 +7542,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #1e1e1e; @@ -4493,6 +7885,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #1e1e1e; @@ -4582,6 +7993,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #1e1e1e; @@ -4759,6 +8276,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4918,6 +8468,59 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4964,6 +8567,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #383838; @@ -5005,6 +8648,55 @@ color: #FFD54F; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5102,6 +8794,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5154,6 +8866,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5238,6 +8999,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5323,6 +9157,290 @@ color: #73000c; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5437,6 +9555,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5483,6 +9675,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #383838; border-radius: 3px; @@ -5508,6 +9739,39 @@ border: 2px solid #1e1e1e; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #FFD54F; color: #212529; @@ -5550,10 +9814,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #383838; color: rgba(255, 255, 255, 0.87); @@ -5589,6 +9887,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -5605,6 +9921,43 @@ box-shadow: 0 0 0 1px #ffe284; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5665,6 +10018,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5681,6 +10141,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5726,6 +10212,67 @@ stroke: #6d5100; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5748,6 +10295,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5756,6 +10335,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #FFD54F; color: #212529; @@ -5791,6 +10386,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css index 8f166d054..e48401cfc 100644 --- a/public/themes/arya-purple/theme.css +++ b/public/themes/arya-purple/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -438,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 1px #cf95d9; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #121212; border: 1px solid #383838; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -847,6 +1320,52 @@ background: #a241b2; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #BA68C8; } @@ -889,6 +1408,14 @@ border-color: #ef9a9a; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -907,6 +1434,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #121212; border: 1px solid #383838; @@ -1035,6 +1657,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1105,6 +1813,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1118,6 +1927,30 @@ background-color: #383838; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1173,6 +2006,15 @@ border-color: #ef9a9a; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1286,6 +2128,61 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1369,6 +2266,112 @@ border-color: #ef9a9a; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #121212; border: 1px solid #383838; @@ -1518,6 +2521,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1544,6 +2574,36 @@ background: #C5E1A5; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1628,6 +2688,22 @@ background: #a241b2; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1703,6 +2779,44 @@ border-color: #ef9a9a; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #383838; border: 0 none; @@ -1745,6 +2859,66 @@ border-color: #BA68C8; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #121212; border: 1px solid #383838; @@ -1825,6 +2999,21 @@ background-color: #383838; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1888,6 +3077,74 @@ border-color: #ef9a9a; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #BA68C8; @@ -2359,6 +3616,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2440,6 +3774,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2453,6 +3820,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2499,6 +3936,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2922,6 +4594,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -2994,6 +4704,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3034,6 +4797,46 @@ box-shadow: 0 0 0 1px #cf95d9; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3116,6 +4919,40 @@ color: rgba(255, 255, 255, 0.87); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3188,6 +5025,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #BA68C8; border-radius: 50%; @@ -3213,6 +5161,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #383838; background: #1e1e1e; @@ -3303,6 +5333,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3501,6 +5700,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #383838; @@ -3602,6 +5818,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #383838; background: #1e1e1e; @@ -3647,6 +5882,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3671,6 +5967,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #383838; padding: 1rem; @@ -3726,6 +6042,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; @@ -3738,6 +6110,66 @@ box-shadow: 0 0 0 1px #cf95d9; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #383838; background: #1e1e1e; @@ -3762,6 +6194,76 @@ background: #383838; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #383838; @@ -3821,6 +6323,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1e1e1e; border: 1px solid #383838; @@ -3832,6 +6354,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3880,6 +6472,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3948,6 +6677,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3990,6 +6789,159 @@ border-top-color: #383838; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4033,6 +6985,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #383838; color: rgba(255, 255, 255, 0.87); @@ -4053,6 +7060,50 @@ border-bottom-color: #383838; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4117,6 +7168,38 @@ border-color: #a241b2; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #1e1e1e; border: 1px solid #383838; @@ -4150,6 +7233,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -4244,6 +7369,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4311,6 +7542,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #1e1e1e; @@ -4493,6 +7885,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #1e1e1e; @@ -4582,6 +7993,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #1e1e1e; @@ -4759,6 +8276,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4918,6 +8468,59 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4964,6 +8567,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #383838; @@ -5005,6 +8648,55 @@ color: #BA68C8; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5102,6 +8794,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5154,6 +8866,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5238,6 +8999,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5323,6 +9157,290 @@ color: #73000c; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5437,6 +9555,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5483,6 +9675,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #383838; border-radius: 3px; @@ -5508,6 +9739,39 @@ border: 2px solid #1e1e1e; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #BA68C8; color: #ffffff; @@ -5550,10 +9814,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #383838; color: rgba(255, 255, 255, 0.87); @@ -5589,6 +9887,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -5605,6 +9921,43 @@ box-shadow: 0 0 0 1px #cf95d9; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5665,6 +10018,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5681,6 +10141,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5726,6 +10212,67 @@ stroke: #6d5100; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5748,6 +10295,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5756,6 +10335,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #BA68C8; color: #ffffff; @@ -5791,6 +10386,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/aura-dark-amber/theme.css b/public/themes/aura-dark-amber/theme.css index 54068e818..326c2d6d8 100644 --- a/public/themes/aura-dark-amber/theme.css +++ b/public/themes/aura-dark-amber/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -691,6 +1057,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #09090b; border: 1px solid #3f3f46; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -866,6 +1339,52 @@ background: #fcd34d; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #52525b; } @@ -908,6 +1427,14 @@ border-color: #fca5a5; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -926,6 +1453,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #09090b; border: 1px solid #3f3f46; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #18181b; color: #a1a1aa; @@ -1124,6 +1832,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1137,6 +1946,30 @@ background-color: #27272a; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1192,6 +2025,15 @@ border-color: #fca5a5; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #18181b; color: #ffffff; @@ -1388,6 +2285,112 @@ border-color: #fca5a5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #09090b; border: 1px solid #3f3f46; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1563,6 +2593,36 @@ background: #4ade80; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1647,6 +2707,22 @@ background: #020617; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #fca5a5; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #3f3f46; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #09090b; border: 1px solid #3f3f46; @@ -1844,6 +3018,21 @@ background-color: #27272a; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #fca5a5; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #020617; background: #fbbf24; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2567,6 +4004,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3062,6 +4772,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: #ffffff; @@ -3102,6 +4865,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #18181b; color: #ffffff; @@ -3184,6 +4987,40 @@ color: #ffffff; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3256,6 +5093,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #3f3f46; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #3f3f46; background: #18181b; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3670,6 +5886,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #3f3f46; background: #18181b; @@ -3715,6 +5950,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #18181b; } @@ -3739,6 +6035,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #3f3f46; padding: 1.125rem; @@ -3794,6 +6110,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f46; border: 0 none; @@ -3806,6 +6178,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #3f3f46; background: #18181b; @@ -3830,6 +6262,76 @@ background: #3f3f46; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #18181b; border: 1px solid #3f3f46; @@ -3889,6 +6391,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #18181b; border: 1px solid #3f3f46; @@ -3900,6 +6422,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #18181b; color: #ffffff; @@ -3948,6 +6540,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4016,6 +6745,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #18181b; color: #ffffff; @@ -4058,6 +6857,159 @@ border-top-color: #3f3f46; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #18181b; color: #ffffff; @@ -4101,6 +7053,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #3f3f46; color: #ffffff; @@ -4121,6 +7128,50 @@ border-bottom-color: #3f3f46; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #18181b; padding: 1.125rem; @@ -4185,6 +7236,38 @@ border-color: #fde68a; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #18181b; border: 0 none; @@ -4218,6 +7301,48 @@ color: #71717a; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4312,6 +7437,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4379,6 +7610,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #18181b; @@ -4561,6 +7953,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4650,6 +8061,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #18181b; @@ -4827,6 +8344,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4986,6 +8536,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5032,6 +8635,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #18181b; border: 1px solid #3f3f46; @@ -5073,6 +8716,55 @@ color: #fbbf24; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -5170,6 +8862,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5240,6 +8952,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5348,6 +9109,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5453,6 +9287,290 @@ color: #09090b; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5567,6 +9685,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5613,6 +9805,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #3f3f46; border-radius: 6px; @@ -5638,6 +9869,39 @@ border: 2px solid #18181b; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #fbbf24; color: #020617; @@ -5688,10 +9952,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #3f3f46; color: #ffffff; @@ -5727,6 +10025,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5743,6 +10059,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5803,6 +10156,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5819,6 +10279,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5864,6 +10350,67 @@ stroke: #eab308; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5886,6 +10433,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5894,6 +10473,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #fbbf24; color: #020617; @@ -5937,6 +10532,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #18181b; color: #ffffff; @@ -6267,8 +10885,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6893,8 +11511,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -6992,7 +11610,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7190,8 +11808,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/aura-dark-blue/theme.css b/public/themes/aura-dark-blue/theme.css index 5683f95cd..33f806718 100644 --- a/public/themes/aura-dark-blue/theme.css +++ b/public/themes/aura-dark-blue/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -691,6 +1057,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #09090b; border: 1px solid #3f3f46; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -866,6 +1339,52 @@ background: #93c5fd; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #52525b; } @@ -908,6 +1427,14 @@ border-color: #fca5a5; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -926,6 +1453,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #09090b; border: 1px solid #3f3f46; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #18181b; color: #a1a1aa; @@ -1124,6 +1832,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1137,6 +1946,30 @@ background-color: #27272a; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1192,6 +2025,15 @@ border-color: #fca5a5; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #18181b; color: #ffffff; @@ -1388,6 +2285,112 @@ border-color: #fca5a5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #09090b; border: 1px solid #3f3f46; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1563,6 +2593,36 @@ background: #4ade80; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1647,6 +2707,22 @@ background: #020617; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #fca5a5; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #3f3f46; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #09090b; border: 1px solid #3f3f46; @@ -1844,6 +3018,21 @@ background-color: #27272a; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #fca5a5; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #020617; background: #60a5fa; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2567,6 +4004,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3062,6 +4772,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: #ffffff; @@ -3102,6 +4865,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #18181b; color: #ffffff; @@ -3184,6 +4987,40 @@ color: #ffffff; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3256,6 +5093,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #3f3f46; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #3f3f46; background: #18181b; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3670,6 +5886,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #3f3f46; background: #18181b; @@ -3715,6 +5950,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #18181b; } @@ -3739,6 +6035,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #3f3f46; padding: 1.125rem; @@ -3794,6 +6110,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f46; border: 0 none; @@ -3806,6 +6178,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #3f3f46; background: #18181b; @@ -3830,6 +6262,76 @@ background: #3f3f46; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #18181b; border: 1px solid #3f3f46; @@ -3889,6 +6391,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #18181b; border: 1px solid #3f3f46; @@ -3900,6 +6422,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #18181b; color: #ffffff; @@ -3948,6 +6540,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4016,6 +6745,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #18181b; color: #ffffff; @@ -4058,6 +6857,159 @@ border-top-color: #3f3f46; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #18181b; color: #ffffff; @@ -4101,6 +7053,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #3f3f46; color: #ffffff; @@ -4121,6 +7128,50 @@ border-bottom-color: #3f3f46; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #18181b; padding: 1.125rem; @@ -4185,6 +7236,38 @@ border-color: #bfdbfe; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #18181b; border: 0 none; @@ -4218,6 +7301,48 @@ color: #71717a; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4312,6 +7437,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4379,6 +7610,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #18181b; @@ -4561,6 +7953,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4650,6 +8061,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #18181b; @@ -4827,6 +8344,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4986,6 +8536,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5032,6 +8635,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #18181b; border: 1px solid #3f3f46; @@ -5073,6 +8716,55 @@ color: #60a5fa; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -5170,6 +8862,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5240,6 +8952,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5348,6 +9109,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5453,6 +9287,290 @@ color: #09090b; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5567,6 +9685,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5613,6 +9805,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #3f3f46; border-radius: 6px; @@ -5638,6 +9869,39 @@ border: 2px solid #18181b; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #60a5fa; color: #020617; @@ -5688,10 +9952,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #3f3f46; color: #ffffff; @@ -5727,6 +10025,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5743,6 +10059,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5803,6 +10156,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5819,6 +10279,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5864,6 +10350,67 @@ stroke: #eab308; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5886,6 +10433,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5894,6 +10473,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #60a5fa; color: #020617; @@ -5937,6 +10532,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #18181b; color: #ffffff; @@ -6267,8 +10885,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6893,8 +11511,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -6992,7 +11610,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7190,8 +11808,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/aura-dark-cyan/theme.css b/public/themes/aura-dark-cyan/theme.css index 9d7f6c93a..a71eb14ad 100644 --- a/public/themes/aura-dark-cyan/theme.css +++ b/public/themes/aura-dark-cyan/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -691,6 +1057,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #09090b; border: 1px solid #3f3f46; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -866,6 +1339,52 @@ background: #67e8f9; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #52525b; } @@ -908,6 +1427,14 @@ border-color: #fca5a5; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -926,6 +1453,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #09090b; border: 1px solid #3f3f46; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #18181b; color: #a1a1aa; @@ -1124,6 +1832,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1137,6 +1946,30 @@ background-color: #27272a; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1192,6 +2025,15 @@ border-color: #fca5a5; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #18181b; color: #ffffff; @@ -1388,6 +2285,112 @@ border-color: #fca5a5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #09090b; border: 1px solid #3f3f46; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1563,6 +2593,36 @@ background: #4ade80; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1647,6 +2707,22 @@ background: #020617; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #fca5a5; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #3f3f46; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #09090b; border: 1px solid #3f3f46; @@ -1844,6 +3018,21 @@ background-color: #27272a; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #fca5a5; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #020617; background: #22d3ee; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2567,6 +4004,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3062,6 +4772,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: #ffffff; @@ -3102,6 +4865,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #18181b; color: #ffffff; @@ -3184,6 +4987,40 @@ color: #ffffff; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3256,6 +5093,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #3f3f46; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #3f3f46; background: #18181b; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3670,6 +5886,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #3f3f46; background: #18181b; @@ -3715,6 +5950,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #18181b; } @@ -3739,6 +6035,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #3f3f46; padding: 1.125rem; @@ -3794,6 +6110,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f46; border: 0 none; @@ -3806,6 +6178,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #3f3f46; background: #18181b; @@ -3830,6 +6262,76 @@ background: #3f3f46; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #18181b; border: 1px solid #3f3f46; @@ -3889,6 +6391,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #18181b; border: 1px solid #3f3f46; @@ -3900,6 +6422,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #18181b; color: #ffffff; @@ -3948,6 +6540,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4016,6 +6745,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #18181b; color: #ffffff; @@ -4058,6 +6857,159 @@ border-top-color: #3f3f46; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #18181b; color: #ffffff; @@ -4101,6 +7053,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #3f3f46; color: #ffffff; @@ -4121,6 +7128,50 @@ border-bottom-color: #3f3f46; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #18181b; padding: 1.125rem; @@ -4185,6 +7236,38 @@ border-color: #a5f3fc; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #18181b; border: 0 none; @@ -4218,6 +7301,48 @@ color: #71717a; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4312,6 +7437,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4379,6 +7610,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #18181b; @@ -4561,6 +7953,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4650,6 +8061,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #18181b; @@ -4827,6 +8344,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4986,6 +8536,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5032,6 +8635,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #18181b; border: 1px solid #3f3f46; @@ -5073,6 +8716,55 @@ color: #22d3ee; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -5170,6 +8862,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5240,6 +8952,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5348,6 +9109,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5453,6 +9287,290 @@ color: #09090b; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5567,6 +9685,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5613,6 +9805,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #3f3f46; border-radius: 6px; @@ -5638,6 +9869,39 @@ border: 2px solid #18181b; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #22d3ee; color: #020617; @@ -5688,10 +9952,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #3f3f46; color: #ffffff; @@ -5727,6 +10025,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5743,6 +10059,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5803,6 +10156,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5819,6 +10279,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5864,6 +10350,67 @@ stroke: #eab308; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5886,6 +10433,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5894,6 +10473,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #22d3ee; color: #020617; @@ -5937,6 +10532,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #18181b; color: #ffffff; @@ -6267,8 +10885,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6893,8 +11511,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -6992,7 +11610,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7190,8 +11808,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/aura-dark-green/theme.css b/public/themes/aura-dark-green/theme.css index 7860c8f9b..4de07897e 100644 --- a/public/themes/aura-dark-green/theme.css +++ b/public/themes/aura-dark-green/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -691,6 +1057,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #09090b; border: 1px solid #3f3f46; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -866,6 +1339,52 @@ background: #6ee7b7; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #52525b; } @@ -908,6 +1427,14 @@ border-color: #fca5a5; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -926,6 +1453,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #09090b; border: 1px solid #3f3f46; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #18181b; color: #a1a1aa; @@ -1124,6 +1832,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1137,6 +1946,30 @@ background-color: #27272a; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1192,6 +2025,15 @@ border-color: #fca5a5; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #18181b; color: #ffffff; @@ -1388,6 +2285,112 @@ border-color: #fca5a5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #09090b; border: 1px solid #3f3f46; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1563,6 +2593,36 @@ background: #4ade80; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1647,6 +2707,22 @@ background: #020617; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #fca5a5; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #3f3f46; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #09090b; border: 1px solid #3f3f46; @@ -1844,6 +3018,21 @@ background-color: #27272a; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #fca5a5; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #020617; background: #34d399; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2567,6 +4004,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3062,6 +4772,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: #ffffff; @@ -3102,6 +4865,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #18181b; color: #ffffff; @@ -3184,6 +4987,40 @@ color: #ffffff; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3256,6 +5093,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #3f3f46; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #3f3f46; background: #18181b; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3670,6 +5886,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #3f3f46; background: #18181b; @@ -3715,6 +5950,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #18181b; } @@ -3739,6 +6035,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #3f3f46; padding: 1.125rem; @@ -3794,6 +6110,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f46; border: 0 none; @@ -3806,6 +6178,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #3f3f46; background: #18181b; @@ -3830,6 +6262,76 @@ background: #3f3f46; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #18181b; border: 1px solid #3f3f46; @@ -3889,6 +6391,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #18181b; border: 1px solid #3f3f46; @@ -3900,6 +6422,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #18181b; color: #ffffff; @@ -3948,6 +6540,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4016,6 +6745,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #18181b; color: #ffffff; @@ -4058,6 +6857,159 @@ border-top-color: #3f3f46; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #18181b; color: #ffffff; @@ -4101,6 +7053,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #3f3f46; color: #ffffff; @@ -4121,6 +7128,50 @@ border-bottom-color: #3f3f46; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #18181b; padding: 1.125rem; @@ -4185,6 +7236,38 @@ border-color: #a7f3d0; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #18181b; border: 0 none; @@ -4218,6 +7301,48 @@ color: #71717a; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4312,6 +7437,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4379,6 +7610,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #18181b; @@ -4561,6 +7953,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4650,6 +8061,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #18181b; @@ -4827,6 +8344,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4986,6 +8536,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5032,6 +8635,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #18181b; border: 1px solid #3f3f46; @@ -5073,6 +8716,55 @@ color: #34d399; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -5170,6 +8862,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5240,6 +8952,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5348,6 +9109,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5453,6 +9287,290 @@ color: #09090b; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5567,6 +9685,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5613,6 +9805,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #3f3f46; border-radius: 6px; @@ -5638,6 +9869,39 @@ border: 2px solid #18181b; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #34d399; color: #020617; @@ -5688,10 +9952,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #3f3f46; color: #ffffff; @@ -5727,6 +10025,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5743,6 +10059,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5803,6 +10156,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5819,6 +10279,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5864,6 +10350,67 @@ stroke: #eab308; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5886,6 +10433,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5894,6 +10473,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #34d399; color: #020617; @@ -5937,6 +10532,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #18181b; color: #ffffff; @@ -6267,8 +10885,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6893,8 +11511,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -6992,7 +11610,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7190,8 +11808,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/aura-dark-indigo/theme.css b/public/themes/aura-dark-indigo/theme.css index 310c0071a..5d8fc8f64 100644 --- a/public/themes/aura-dark-indigo/theme.css +++ b/public/themes/aura-dark-indigo/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -691,6 +1057,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #09090b; border: 1px solid #3f3f46; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -866,6 +1339,52 @@ background: #a5b4fc; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #52525b; } @@ -908,6 +1427,14 @@ border-color: #fca5a5; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -926,6 +1453,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #09090b; border: 1px solid #3f3f46; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #18181b; color: #a1a1aa; @@ -1124,6 +1832,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1137,6 +1946,30 @@ background-color: #27272a; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1192,6 +2025,15 @@ border-color: #fca5a5; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #18181b; color: #ffffff; @@ -1388,6 +2285,112 @@ border-color: #fca5a5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #09090b; border: 1px solid #3f3f46; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1563,6 +2593,36 @@ background: #4ade80; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1647,6 +2707,22 @@ background: #020617; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #fca5a5; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #3f3f46; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #09090b; border: 1px solid #3f3f46; @@ -1844,6 +3018,21 @@ background-color: #27272a; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #fca5a5; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #020617; background: #818cf8; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2567,6 +4004,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3062,6 +4772,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: #ffffff; @@ -3102,6 +4865,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #18181b; color: #ffffff; @@ -3184,6 +4987,40 @@ color: #ffffff; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3256,6 +5093,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #3f3f46; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #3f3f46; background: #18181b; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3670,6 +5886,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #3f3f46; background: #18181b; @@ -3715,6 +5950,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #18181b; } @@ -3739,6 +6035,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #3f3f46; padding: 1.125rem; @@ -3794,6 +6110,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f46; border: 0 none; @@ -3806,6 +6178,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #3f3f46; background: #18181b; @@ -3830,6 +6262,76 @@ background: #3f3f46; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #18181b; border: 1px solid #3f3f46; @@ -3889,6 +6391,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #18181b; border: 1px solid #3f3f46; @@ -3900,6 +6422,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #18181b; color: #ffffff; @@ -3948,6 +6540,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4016,6 +6745,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #18181b; color: #ffffff; @@ -4058,6 +6857,159 @@ border-top-color: #3f3f46; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #18181b; color: #ffffff; @@ -4101,6 +7053,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #3f3f46; color: #ffffff; @@ -4121,6 +7128,50 @@ border-bottom-color: #3f3f46; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #18181b; padding: 1.125rem; @@ -4185,6 +7236,38 @@ border-color: #c7d2fe; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #18181b; border: 0 none; @@ -4218,6 +7301,48 @@ color: #71717a; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4312,6 +7437,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4379,6 +7610,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #18181b; @@ -4561,6 +7953,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4650,6 +8061,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #18181b; @@ -4827,6 +8344,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4986,6 +8536,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5032,6 +8635,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #18181b; border: 1px solid #3f3f46; @@ -5073,6 +8716,55 @@ color: #818cf8; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -5170,6 +8862,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5240,6 +8952,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5348,6 +9109,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5453,6 +9287,290 @@ color: #09090b; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5567,6 +9685,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5613,6 +9805,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #3f3f46; border-radius: 6px; @@ -5638,6 +9869,39 @@ border: 2px solid #18181b; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #818cf8; color: #020617; @@ -5688,10 +9952,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #3f3f46; color: #ffffff; @@ -5727,6 +10025,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5743,6 +10059,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5803,6 +10156,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5819,6 +10279,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5864,6 +10350,67 @@ stroke: #eab308; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5886,6 +10433,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5894,6 +10473,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #818cf8; color: #020617; @@ -5937,6 +10532,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #18181b; color: #ffffff; @@ -6267,8 +10885,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6893,8 +11511,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -6992,7 +11610,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7190,8 +11808,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/aura-dark-lime/theme.css b/public/themes/aura-dark-lime/theme.css index 8ddd2a241..eb21d6f22 100644 --- a/public/themes/aura-dark-lime/theme.css +++ b/public/themes/aura-dark-lime/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -691,6 +1057,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #09090b; border: 1px solid #3f3f46; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -866,6 +1339,52 @@ background: #bef264; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #52525b; } @@ -908,6 +1427,14 @@ border-color: #fca5a5; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -926,6 +1453,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #09090b; border: 1px solid #3f3f46; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #18181b; color: #a1a1aa; @@ -1124,6 +1832,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1137,6 +1946,30 @@ background-color: #27272a; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1192,6 +2025,15 @@ border-color: #fca5a5; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #18181b; color: #ffffff; @@ -1388,6 +2285,112 @@ border-color: #fca5a5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #09090b; border: 1px solid #3f3f46; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1563,6 +2593,36 @@ background: #4ade80; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1647,6 +2707,22 @@ background: #020617; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #fca5a5; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #3f3f46; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #09090b; border: 1px solid #3f3f46; @@ -1844,6 +3018,21 @@ background-color: #27272a; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #fca5a5; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #020617; background: #a3e635; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2567,6 +4004,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3062,6 +4772,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: #ffffff; @@ -3102,6 +4865,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #18181b; color: #ffffff; @@ -3184,6 +4987,40 @@ color: #ffffff; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3256,6 +5093,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #3f3f46; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #3f3f46; background: #18181b; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3670,6 +5886,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #3f3f46; background: #18181b; @@ -3715,6 +5950,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #18181b; } @@ -3739,6 +6035,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #3f3f46; padding: 1.125rem; @@ -3794,6 +6110,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f46; border: 0 none; @@ -3806,6 +6178,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #3f3f46; background: #18181b; @@ -3830,6 +6262,76 @@ background: #3f3f46; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #18181b; border: 1px solid #3f3f46; @@ -3889,6 +6391,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #18181b; border: 1px solid #3f3f46; @@ -3900,6 +6422,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #18181b; color: #ffffff; @@ -3948,6 +6540,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4016,6 +6745,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #18181b; color: #ffffff; @@ -4058,6 +6857,159 @@ border-top-color: #3f3f46; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #18181b; color: #ffffff; @@ -4101,6 +7053,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #3f3f46; color: #ffffff; @@ -4121,6 +7128,50 @@ border-bottom-color: #3f3f46; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #18181b; padding: 1.125rem; @@ -4185,6 +7236,38 @@ border-color: #d9f99d; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #18181b; border: 0 none; @@ -4218,6 +7301,48 @@ color: #71717a; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4312,6 +7437,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4379,6 +7610,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #18181b; @@ -4561,6 +7953,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4650,6 +8061,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #18181b; @@ -4827,6 +8344,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4986,6 +8536,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5032,6 +8635,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #18181b; border: 1px solid #3f3f46; @@ -5073,6 +8716,55 @@ color: #a3e635; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -5170,6 +8862,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5240,6 +8952,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5348,6 +9109,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5453,6 +9287,290 @@ color: #09090b; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5567,6 +9685,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5613,6 +9805,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #3f3f46; border-radius: 6px; @@ -5638,6 +9869,39 @@ border: 2px solid #18181b; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #a3e635; color: #020617; @@ -5688,10 +9952,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #3f3f46; color: #ffffff; @@ -5727,6 +10025,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5743,6 +10059,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5803,6 +10156,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5819,6 +10279,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5864,6 +10350,67 @@ stroke: #eab308; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5886,6 +10433,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5894,6 +10473,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #a3e635; color: #020617; @@ -5937,6 +10532,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #18181b; color: #ffffff; @@ -6267,8 +10885,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6893,8 +11511,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -6992,7 +11610,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7190,8 +11808,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/aura-dark-noir/theme.css b/public/themes/aura-dark-noir/theme.css index c34ca7a80..644892b88 100644 --- a/public/themes/aura-dark-noir/theme.css +++ b/public/themes/aura-dark-noir/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -691,6 +1057,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #09090b; border: 1px solid #3f3f46; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -866,6 +1339,52 @@ background: #f4f4f5; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #52525b; } @@ -908,6 +1427,14 @@ border-color: #fca5a5; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -926,6 +1453,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #09090b; border: 1px solid #3f3f46; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #18181b; color: #a1a1aa; @@ -1124,6 +1832,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1137,6 +1946,30 @@ background-color: #27272a; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1192,6 +2025,15 @@ border-color: #fca5a5; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #18181b; color: #ffffff; @@ -1388,6 +2285,112 @@ border-color: #fca5a5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #09090b; border: 1px solid #3f3f46; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1563,6 +2593,36 @@ background: #4ade80; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1647,6 +2707,22 @@ background: #020617; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #fca5a5; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #3f3f46; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #09090b; border: 1px solid #3f3f46; @@ -1844,6 +3018,21 @@ background-color: #27272a; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #fca5a5; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #020617; background: #fafafa; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2567,6 +4004,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3062,6 +4772,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: #ffffff; @@ -3102,6 +4865,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #18181b; color: #ffffff; @@ -3184,6 +4987,40 @@ color: #ffffff; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3256,6 +5093,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #3f3f46; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #3f3f46; background: #18181b; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3670,6 +5886,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #3f3f46; background: #18181b; @@ -3715,6 +5950,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #18181b; } @@ -3739,6 +6035,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #3f3f46; padding: 1.125rem; @@ -3794,6 +6110,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f46; border: 0 none; @@ -3806,6 +6178,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #3f3f46; background: #18181b; @@ -3830,6 +6262,76 @@ background: #3f3f46; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #18181b; border: 1px solid #3f3f46; @@ -3889,6 +6391,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #18181b; border: 1px solid #3f3f46; @@ -3900,6 +6422,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #18181b; color: #ffffff; @@ -3948,6 +6540,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4016,6 +6745,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #18181b; color: #ffffff; @@ -4058,6 +6857,159 @@ border-top-color: #3f3f46; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #18181b; color: #ffffff; @@ -4101,6 +7053,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #3f3f46; color: #ffffff; @@ -4121,6 +7128,50 @@ border-bottom-color: #3f3f46; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #18181b; padding: 1.125rem; @@ -4185,6 +7236,38 @@ border-color: #e4e4e7; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #18181b; border: 0 none; @@ -4218,6 +7301,48 @@ color: #71717a; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4312,6 +7437,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4379,6 +7610,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #18181b; @@ -4561,6 +7953,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4650,6 +8061,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #18181b; @@ -4827,6 +8344,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4986,6 +8536,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5032,6 +8635,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #18181b; border: 1px solid #3f3f46; @@ -5073,6 +8716,55 @@ color: #fafafa; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -5170,6 +8862,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5240,6 +8952,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5348,6 +9109,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5453,6 +9287,290 @@ color: #09090b; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5567,6 +9685,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5613,6 +9805,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #3f3f46; border-radius: 6px; @@ -5638,6 +9869,39 @@ border: 2px solid #18181b; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #fafafa; color: #020617; @@ -5688,10 +9952,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #3f3f46; color: #ffffff; @@ -5727,6 +10025,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5743,6 +10059,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5803,6 +10156,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5819,6 +10279,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5864,6 +10350,67 @@ stroke: #eab308; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5886,6 +10433,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5894,6 +10473,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #fafafa; color: #020617; @@ -5937,6 +10532,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #18181b; color: #ffffff; @@ -6267,8 +10885,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6893,8 +11511,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -6992,7 +11610,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7190,8 +11808,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/aura-dark-pink/theme.css b/public/themes/aura-dark-pink/theme.css index fe9ac4768..de7c59a01 100644 --- a/public/themes/aura-dark-pink/theme.css +++ b/public/themes/aura-dark-pink/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -691,6 +1057,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #09090b; border: 1px solid #3f3f46; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -866,6 +1339,52 @@ background: #f9a8d4; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #52525b; } @@ -908,6 +1427,14 @@ border-color: #fca5a5; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -926,6 +1453,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #09090b; border: 1px solid #3f3f46; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #18181b; color: #a1a1aa; @@ -1124,6 +1832,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1137,6 +1946,30 @@ background-color: #27272a; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1192,6 +2025,15 @@ border-color: #fca5a5; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #18181b; color: #ffffff; @@ -1388,6 +2285,112 @@ border-color: #fca5a5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #09090b; border: 1px solid #3f3f46; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1563,6 +2593,36 @@ background: #4ade80; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1647,6 +2707,22 @@ background: #020617; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #fca5a5; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #3f3f46; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #09090b; border: 1px solid #3f3f46; @@ -1844,6 +3018,21 @@ background-color: #27272a; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #fca5a5; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #020617; background: #f472b6; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2567,6 +4004,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3062,6 +4772,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: #ffffff; @@ -3102,6 +4865,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #18181b; color: #ffffff; @@ -3184,6 +4987,40 @@ color: #ffffff; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3256,6 +5093,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #3f3f46; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #3f3f46; background: #18181b; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3670,6 +5886,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #3f3f46; background: #18181b; @@ -3715,6 +5950,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #18181b; } @@ -3739,6 +6035,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #3f3f46; padding: 1.125rem; @@ -3794,6 +6110,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f46; border: 0 none; @@ -3806,6 +6178,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #3f3f46; background: #18181b; @@ -3830,6 +6262,76 @@ background: #3f3f46; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #18181b; border: 1px solid #3f3f46; @@ -3889,6 +6391,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #18181b; border: 1px solid #3f3f46; @@ -3900,6 +6422,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #18181b; color: #ffffff; @@ -3948,6 +6540,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4016,6 +6745,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #18181b; color: #ffffff; @@ -4058,6 +6857,159 @@ border-top-color: #3f3f46; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #18181b; color: #ffffff; @@ -4101,6 +7053,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #3f3f46; color: #ffffff; @@ -4121,6 +7128,50 @@ border-bottom-color: #3f3f46; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #18181b; padding: 1.125rem; @@ -4185,6 +7236,38 @@ border-color: #fbcfe8; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #18181b; border: 0 none; @@ -4218,6 +7301,48 @@ color: #71717a; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4312,6 +7437,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4379,6 +7610,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #18181b; @@ -4561,6 +7953,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4650,6 +8061,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #18181b; @@ -4827,6 +8344,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4986,6 +8536,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5032,6 +8635,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #18181b; border: 1px solid #3f3f46; @@ -5073,6 +8716,55 @@ color: #f472b6; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -5170,6 +8862,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5240,6 +8952,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5348,6 +9109,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5453,6 +9287,290 @@ color: #09090b; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5567,6 +9685,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5613,6 +9805,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #3f3f46; border-radius: 6px; @@ -5638,6 +9869,39 @@ border: 2px solid #18181b; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #f472b6; color: #020617; @@ -5688,10 +9952,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #3f3f46; color: #ffffff; @@ -5727,6 +10025,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5743,6 +10059,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5803,6 +10156,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5819,6 +10279,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5864,6 +10350,67 @@ stroke: #eab308; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5886,6 +10433,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5894,6 +10473,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #f472b6; color: #020617; @@ -5937,6 +10532,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #18181b; color: #ffffff; @@ -6267,8 +10885,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6893,8 +11511,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -6992,7 +11610,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7190,8 +11808,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/aura-dark-purple/theme.css b/public/themes/aura-dark-purple/theme.css index e081b72a7..33168128e 100644 --- a/public/themes/aura-dark-purple/theme.css +++ b/public/themes/aura-dark-purple/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -691,6 +1057,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #09090b; border: 1px solid #3f3f46; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -866,6 +1339,52 @@ background: #c4b5fd; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #52525b; } @@ -908,6 +1427,14 @@ border-color: #fca5a5; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -926,6 +1453,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #09090b; border: 1px solid #3f3f46; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #18181b; color: #a1a1aa; @@ -1124,6 +1832,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1137,6 +1946,30 @@ background-color: #27272a; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1192,6 +2025,15 @@ border-color: #fca5a5; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #18181b; color: #ffffff; @@ -1388,6 +2285,112 @@ border-color: #fca5a5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #09090b; border: 1px solid #3f3f46; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1563,6 +2593,36 @@ background: #4ade80; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1647,6 +2707,22 @@ background: #020617; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #fca5a5; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #3f3f46; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #09090b; border: 1px solid #3f3f46; @@ -1844,6 +3018,21 @@ background-color: #27272a; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #fca5a5; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #020617; background: #a78bfa; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2567,6 +4004,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3062,6 +4772,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: #ffffff; @@ -3102,6 +4865,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #18181b; color: #ffffff; @@ -3184,6 +4987,40 @@ color: #ffffff; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3256,6 +5093,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #3f3f46; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #3f3f46; background: #18181b; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3670,6 +5886,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #3f3f46; background: #18181b; @@ -3715,6 +5950,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #18181b; } @@ -3739,6 +6035,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #3f3f46; padding: 1.125rem; @@ -3794,6 +6110,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f46; border: 0 none; @@ -3806,6 +6178,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #3f3f46; background: #18181b; @@ -3830,6 +6262,76 @@ background: #3f3f46; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #18181b; border: 1px solid #3f3f46; @@ -3889,6 +6391,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #18181b; border: 1px solid #3f3f46; @@ -3900,6 +6422,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #18181b; color: #ffffff; @@ -3948,6 +6540,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4016,6 +6745,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #18181b; color: #ffffff; @@ -4058,6 +6857,159 @@ border-top-color: #3f3f46; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #18181b; color: #ffffff; @@ -4101,6 +7053,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #3f3f46; color: #ffffff; @@ -4121,6 +7128,50 @@ border-bottom-color: #3f3f46; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #18181b; padding: 1.125rem; @@ -4185,6 +7236,38 @@ border-color: #ddd6fe; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #18181b; border: 0 none; @@ -4218,6 +7301,48 @@ color: #71717a; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4312,6 +7437,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4379,6 +7610,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #18181b; @@ -4561,6 +7953,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4650,6 +8061,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #18181b; @@ -4827,6 +8344,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4986,6 +8536,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5032,6 +8635,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #18181b; border: 1px solid #3f3f46; @@ -5073,6 +8716,55 @@ color: #a78bfa; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -5170,6 +8862,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5240,6 +8952,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5348,6 +9109,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5453,6 +9287,290 @@ color: #09090b; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5567,6 +9685,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5613,6 +9805,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #3f3f46; border-radius: 6px; @@ -5638,6 +9869,39 @@ border: 2px solid #18181b; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #a78bfa; color: #020617; @@ -5688,10 +9952,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #3f3f46; color: #ffffff; @@ -5727,6 +10025,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5743,6 +10059,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5803,6 +10156,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5819,6 +10279,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5864,6 +10350,67 @@ stroke: #eab308; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5886,6 +10433,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5894,6 +10473,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #a78bfa; color: #020617; @@ -5937,6 +10532,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #18181b; color: #ffffff; @@ -6267,8 +10885,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6893,8 +11511,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -6992,7 +11610,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7190,8 +11808,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/aura-dark-teal/theme.css b/public/themes/aura-dark-teal/theme.css index dc743f2b8..cdd7f359b 100644 --- a/public/themes/aura-dark-teal/theme.css +++ b/public/themes/aura-dark-teal/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -691,6 +1057,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #09090b; border: 1px solid #3f3f46; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -866,6 +1339,52 @@ background: #5eead4; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #52525b; } @@ -908,6 +1427,14 @@ border-color: #fca5a5; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -926,6 +1453,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #09090b; border: 1px solid #3f3f46; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #18181b; color: #a1a1aa; @@ -1124,6 +1832,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1137,6 +1946,30 @@ background-color: #27272a; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1192,6 +2025,15 @@ border-color: #fca5a5; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #18181b; color: #ffffff; @@ -1388,6 +2285,112 @@ border-color: #fca5a5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #09090b; border: 1px solid #3f3f46; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1563,6 +2593,36 @@ background: #4ade80; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1647,6 +2707,22 @@ background: #020617; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #fca5a5; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #3f3f46; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #09090b; border: 1px solid #3f3f46; @@ -1844,6 +3018,21 @@ background-color: #27272a; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #fca5a5; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #020617; background: #2dd4bf; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2567,6 +4004,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3062,6 +4772,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: #ffffff; @@ -3102,6 +4865,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #18181b; color: #ffffff; @@ -3184,6 +4987,40 @@ color: #ffffff; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3256,6 +5093,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #3f3f46; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #3f3f46; background: #18181b; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3670,6 +5886,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #3f3f46; background: #18181b; @@ -3715,6 +5950,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #18181b; } @@ -3739,6 +6035,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #3f3f46; padding: 1.125rem; @@ -3794,6 +6110,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f46; border: 0 none; @@ -3806,6 +6178,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #3f3f46; background: #18181b; @@ -3830,6 +6262,76 @@ background: #3f3f46; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #18181b; border: 1px solid #3f3f46; @@ -3889,6 +6391,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #18181b; border: 1px solid #3f3f46; @@ -3900,6 +6422,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #18181b; color: #ffffff; @@ -3948,6 +6540,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4016,6 +6745,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #18181b; color: #ffffff; @@ -4058,6 +6857,159 @@ border-top-color: #3f3f46; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #18181b; color: #ffffff; @@ -4101,6 +7053,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #3f3f46; color: #ffffff; @@ -4121,6 +7128,50 @@ border-bottom-color: #3f3f46; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #18181b; padding: 1.125rem; @@ -4185,6 +7236,38 @@ border-color: #99f6e4; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #18181b; border: 0 none; @@ -4218,6 +7301,48 @@ color: #71717a; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4312,6 +7437,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4379,6 +7610,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #18181b; @@ -4561,6 +7953,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #18181b; @@ -4650,6 +8061,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #18181b; @@ -4827,6 +8344,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4986,6 +8536,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5032,6 +8635,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #18181b; border: 1px solid #3f3f46; @@ -5073,6 +8716,55 @@ color: #2dd4bf; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #18181b; @@ -5170,6 +8862,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5240,6 +8952,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5348,6 +9109,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5453,6 +9287,290 @@ color: #09090b; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5567,6 +9685,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5613,6 +9805,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #3f3f46; border-radius: 6px; @@ -5638,6 +9869,39 @@ border: 2px solid #18181b; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #2dd4bf; color: #020617; @@ -5688,10 +9952,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #3f3f46; color: #ffffff; @@ -5727,6 +10025,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5743,6 +10059,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5803,6 +10156,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5819,6 +10279,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5864,6 +10350,67 @@ stroke: #eab308; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5886,6 +10433,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5894,6 +10473,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #2dd4bf; color: #020617; @@ -5937,6 +10532,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #18181b; color: #ffffff; @@ -6267,8 +10885,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6893,8 +11511,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -6992,7 +11610,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7190,8 +11808,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/aura-light-amber/theme.css b/public/themes/aura-light-amber/theme.css index 7948a15e6..e6282e020 100644 --- a/public/themes/aura-light-amber/theme.css +++ b/public/themes/aura-light-amber/theme.css @@ -292,6 +292,126 @@ } @layer primevue { + .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; } @@ -367,6 +487,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -459,6 +675,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -693,6 +1059,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -783,6 +1239,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -868,6 +1341,52 @@ background: #d97706; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #94a3b8; } @@ -910,6 +1429,14 @@ border-color: #f87171; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -928,6 +1455,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #cbd5e1; @@ -1056,6 +1678,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #ffffff; color: #64748b; @@ -1126,6 +1834,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1139,6 +1948,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1194,6 +2027,15 @@ border-color: #f87171; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1307,6 +2149,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #334155; @@ -1390,6 +2287,112 @@ border-color: #f87171; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1539,6 +2542,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1565,6 +2595,36 @@ background: #22c55e; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1649,6 +2709,22 @@ background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1724,6 +2800,44 @@ border-color: #f87171; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e2e8f0; border: 0 none; @@ -1766,6 +2880,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1846,6 +3020,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1909,6 +3098,74 @@ border-color: #f87171; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #f59e0b; @@ -2429,6 +3686,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2510,6 +3844,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2523,6 +3890,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2569,6 +4006,241 @@ color: #b45309; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2992,6 +4664,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3064,6 +4774,59 @@ background: #f1f5f9; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f1f5f9; color: #1e293b; @@ -3104,6 +4867,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #334155; @@ -3186,6 +4989,40 @@ color: #475569; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3258,6 +5095,117 @@ background: #f1f5f9; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #e2e8f0; border-radius: 50%; @@ -3283,6 +5231,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e2e8f0; background: #ffffff; @@ -3373,6 +5403,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3571,6 +5770,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3672,6 +5888,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e2e8f0; background: #ffffff; @@ -3717,6 +5952,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3741,6 +6037,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e2e8f0; padding: 1.125rem; @@ -3796,6 +6112,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f1f5f9; border: 0 none; @@ -3808,6 +6180,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e2e8f0; background: #ffffff; @@ -3832,6 +6264,76 @@ background: #e2e8f0; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -3891,6 +6393,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #ffffff; border: 1px solid #e2e8f0; @@ -3902,6 +6424,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #334155; @@ -3950,6 +6542,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4018,6 +6747,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #334155; @@ -4060,6 +6859,159 @@ border-top-color: #e2e8f0; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #334155; @@ -4103,6 +7055,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #334155; color: #ffffff; @@ -4123,6 +7130,50 @@ border-bottom-color: #334155; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1.125rem; @@ -4187,6 +7238,38 @@ border-color: #b45309; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 0 none; @@ -4220,6 +7303,48 @@ color: #94a3b8; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4314,6 +7439,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4381,6 +7612,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4563,6 +7955,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4652,6 +8063,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4829,6 +8346,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4988,6 +8538,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5034,6 +8637,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -5075,6 +8718,55 @@ color: #f59e0b; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -5172,6 +8864,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5242,6 +8954,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5350,6 +9111,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5455,6 +9289,290 @@ color: #f8fafc; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5569,6 +9687,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5615,6 +9807,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e2e8f0; border-radius: 6px; @@ -5640,6 +9871,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #f59e0b; color: #ffffff; @@ -5690,10 +9954,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #f1f5f9; color: #1e293b; @@ -5729,6 +10027,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5745,6 +10061,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5805,6 +10158,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5821,6 +10281,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5866,6 +10352,67 @@ stroke: #ca8a04; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5888,6 +10435,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e2e8f0; border-radius: 6px; @@ -5896,6 +10475,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #f59e0b; color: #ffffff; @@ -5939,6 +10534,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #334155; @@ -6268,8 +10886,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6894,8 +11512,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -6993,7 +11611,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7191,8 +11809,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/aura-light-blue/theme.css b/public/themes/aura-light-blue/theme.css index 8f0520bb2..733f0fc2c 100644 --- a/public/themes/aura-light-blue/theme.css +++ b/public/themes/aura-light-blue/theme.css @@ -292,6 +292,126 @@ } @layer primevue { + .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; } @@ -367,6 +487,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -459,6 +675,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -693,6 +1059,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -783,6 +1239,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -868,6 +1341,52 @@ background: #2563eb; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #94a3b8; } @@ -910,6 +1429,14 @@ border-color: #f87171; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -928,6 +1455,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #cbd5e1; @@ -1056,6 +1678,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #ffffff; color: #64748b; @@ -1126,6 +1834,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1139,6 +1948,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1194,6 +2027,15 @@ border-color: #f87171; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1307,6 +2149,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #334155; @@ -1390,6 +2287,112 @@ border-color: #f87171; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1539,6 +2542,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1565,6 +2595,36 @@ background: #22c55e; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1649,6 +2709,22 @@ background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1724,6 +2800,44 @@ border-color: #f87171; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e2e8f0; border: 0 none; @@ -1766,6 +2880,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1846,6 +3020,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1909,6 +3098,74 @@ border-color: #f87171; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #3B82F6; @@ -2429,6 +3686,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2510,6 +3844,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2523,6 +3890,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2569,6 +4006,241 @@ color: #1D4ED8; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2992,6 +4664,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3064,6 +4774,59 @@ background: #f1f5f9; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f1f5f9; color: #1e293b; @@ -3104,6 +4867,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #334155; @@ -3186,6 +4989,40 @@ color: #475569; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3258,6 +5095,117 @@ background: #f1f5f9; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #e2e8f0; border-radius: 50%; @@ -3283,6 +5231,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e2e8f0; background: #ffffff; @@ -3373,6 +5403,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3571,6 +5770,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3672,6 +5888,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e2e8f0; background: #ffffff; @@ -3717,6 +5952,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3741,6 +6037,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e2e8f0; padding: 1.125rem; @@ -3796,6 +6112,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f1f5f9; border: 0 none; @@ -3808,6 +6180,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e2e8f0; background: #ffffff; @@ -3832,6 +6264,76 @@ background: #e2e8f0; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -3891,6 +6393,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #ffffff; border: 1px solid #e2e8f0; @@ -3902,6 +6424,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #334155; @@ -3950,6 +6542,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4018,6 +6747,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #334155; @@ -4060,6 +6859,159 @@ border-top-color: #e2e8f0; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #334155; @@ -4103,6 +7055,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #334155; color: #ffffff; @@ -4123,6 +7130,50 @@ border-bottom-color: #334155; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1.125rem; @@ -4187,6 +7238,38 @@ border-color: #1D4ED8; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 0 none; @@ -4220,6 +7303,48 @@ color: #94a3b8; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4314,6 +7439,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4381,6 +7612,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4563,6 +7955,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4652,6 +8063,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4829,6 +8346,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4988,6 +8538,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5034,6 +8637,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -5075,6 +8718,55 @@ color: #3B82F6; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -5172,6 +8864,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5242,6 +8954,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5350,6 +9111,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5455,6 +9289,290 @@ color: #f8fafc; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5569,6 +9687,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5615,6 +9807,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e2e8f0; border-radius: 6px; @@ -5640,6 +9871,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #3B82F6; color: #ffffff; @@ -5690,10 +9954,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #f1f5f9; color: #1e293b; @@ -5729,6 +10027,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5745,6 +10061,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5805,6 +10158,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5821,6 +10281,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5866,6 +10352,67 @@ stroke: #ca8a04; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5888,6 +10435,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e2e8f0; border-radius: 6px; @@ -5896,6 +10475,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #3B82F6; color: #ffffff; @@ -5939,6 +10534,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #334155; @@ -6268,8 +10886,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6894,8 +11512,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -6993,7 +11611,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7191,8 +11809,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/aura-light-cyan/theme.css b/public/themes/aura-light-cyan/theme.css index d1d0a66b6..63ac0f770 100644 --- a/public/themes/aura-light-cyan/theme.css +++ b/public/themes/aura-light-cyan/theme.css @@ -292,6 +292,126 @@ } @layer primevue { + .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; } @@ -367,6 +487,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -459,6 +675,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -693,6 +1059,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -783,6 +1239,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -868,6 +1341,52 @@ background: #0891b2; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #94a3b8; } @@ -910,6 +1429,14 @@ border-color: #f87171; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -928,6 +1455,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #cbd5e1; @@ -1056,6 +1678,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #ffffff; color: #64748b; @@ -1126,6 +1834,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1139,6 +1948,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1194,6 +2027,15 @@ border-color: #f87171; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1307,6 +2149,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #334155; @@ -1390,6 +2287,112 @@ border-color: #f87171; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1539,6 +2542,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1565,6 +2595,36 @@ background: #22c55e; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1649,6 +2709,22 @@ background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1724,6 +2800,44 @@ border-color: #f87171; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e2e8f0; border: 0 none; @@ -1766,6 +2880,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1846,6 +3020,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1909,6 +3098,74 @@ border-color: #f87171; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #06b6d4; @@ -2429,6 +3686,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2510,6 +3844,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2523,6 +3890,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2569,6 +4006,241 @@ color: #0e7490; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2992,6 +4664,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3064,6 +4774,59 @@ background: #f1f5f9; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f1f5f9; color: #1e293b; @@ -3104,6 +4867,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #334155; @@ -3186,6 +4989,40 @@ color: #475569; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3258,6 +5095,117 @@ background: #f1f5f9; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #e2e8f0; border-radius: 50%; @@ -3283,6 +5231,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e2e8f0; background: #ffffff; @@ -3373,6 +5403,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3571,6 +5770,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3672,6 +5888,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e2e8f0; background: #ffffff; @@ -3717,6 +5952,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3741,6 +6037,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e2e8f0; padding: 1.125rem; @@ -3796,6 +6112,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f1f5f9; border: 0 none; @@ -3808,6 +6180,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e2e8f0; background: #ffffff; @@ -3832,6 +6264,76 @@ background: #e2e8f0; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -3891,6 +6393,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #ffffff; border: 1px solid #e2e8f0; @@ -3902,6 +6424,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #334155; @@ -3950,6 +6542,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4018,6 +6747,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #334155; @@ -4060,6 +6859,159 @@ border-top-color: #e2e8f0; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #334155; @@ -4103,6 +7055,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #334155; color: #ffffff; @@ -4123,6 +7130,50 @@ border-bottom-color: #334155; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1.125rem; @@ -4187,6 +7238,38 @@ border-color: #0e7490; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 0 none; @@ -4220,6 +7303,48 @@ color: #94a3b8; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4314,6 +7439,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4381,6 +7612,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4563,6 +7955,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4652,6 +8063,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4829,6 +8346,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4988,6 +8538,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5034,6 +8637,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -5075,6 +8718,55 @@ color: #06b6d4; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -5172,6 +8864,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5242,6 +8954,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5350,6 +9111,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5455,6 +9289,290 @@ color: #f8fafc; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5569,6 +9687,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5615,6 +9807,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e2e8f0; border-radius: 6px; @@ -5640,6 +9871,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #06b6d4; color: #ffffff; @@ -5690,10 +9954,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #f1f5f9; color: #1e293b; @@ -5729,6 +10027,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5745,6 +10061,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5805,6 +10158,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5821,6 +10281,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5866,6 +10352,67 @@ stroke: #ca8a04; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5888,6 +10435,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e2e8f0; border-radius: 6px; @@ -5896,6 +10475,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #06b6d4; color: #ffffff; @@ -5939,6 +10534,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #334155; @@ -6268,8 +10886,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6894,8 +11512,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -6993,7 +11611,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7191,8 +11809,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/aura-light-green/theme.css b/public/themes/aura-light-green/theme.css index c57c3fca2..80873dcf9 100644 --- a/public/themes/aura-light-green/theme.css +++ b/public/themes/aura-light-green/theme.css @@ -292,6 +292,126 @@ } @layer primevue { + .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; } @@ -367,6 +487,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -459,6 +675,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -693,6 +1059,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -783,6 +1239,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -868,6 +1341,52 @@ background: #059669; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #94a3b8; } @@ -910,6 +1429,14 @@ border-color: #f87171; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -928,6 +1455,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #cbd5e1; @@ -1056,6 +1678,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #ffffff; color: #64748b; @@ -1126,6 +1834,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1139,6 +1948,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1194,6 +2027,15 @@ border-color: #f87171; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1307,6 +2149,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #334155; @@ -1390,6 +2287,112 @@ border-color: #f87171; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1539,6 +2542,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1565,6 +2595,36 @@ background: #22c55e; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1649,6 +2709,22 @@ background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1724,6 +2800,44 @@ border-color: #f87171; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e2e8f0; border: 0 none; @@ -1766,6 +2880,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1846,6 +3020,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1909,6 +3098,74 @@ border-color: #f87171; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #10b981; @@ -2429,6 +3686,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2510,6 +3844,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2523,6 +3890,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2569,6 +4006,241 @@ color: #047857; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2992,6 +4664,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3064,6 +4774,59 @@ background: #f1f5f9; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f1f5f9; color: #1e293b; @@ -3104,6 +4867,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #334155; @@ -3186,6 +4989,40 @@ color: #475569; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3258,6 +5095,117 @@ background: #f1f5f9; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #e2e8f0; border-radius: 50%; @@ -3283,6 +5231,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e2e8f0; background: #ffffff; @@ -3373,6 +5403,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3571,6 +5770,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3672,6 +5888,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e2e8f0; background: #ffffff; @@ -3717,6 +5952,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3741,6 +6037,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e2e8f0; padding: 1.125rem; @@ -3796,6 +6112,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f1f5f9; border: 0 none; @@ -3808,6 +6180,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e2e8f0; background: #ffffff; @@ -3832,6 +6264,76 @@ background: #e2e8f0; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -3891,6 +6393,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #ffffff; border: 1px solid #e2e8f0; @@ -3902,6 +6424,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #334155; @@ -3950,6 +6542,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4018,6 +6747,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #334155; @@ -4060,6 +6859,159 @@ border-top-color: #e2e8f0; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #334155; @@ -4103,6 +7055,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #334155; color: #ffffff; @@ -4123,6 +7130,50 @@ border-bottom-color: #334155; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1.125rem; @@ -4187,6 +7238,38 @@ border-color: #047857; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 0 none; @@ -4220,6 +7303,48 @@ color: #94a3b8; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4314,6 +7439,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4381,6 +7612,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4563,6 +7955,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4652,6 +8063,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4829,6 +8346,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4988,6 +8538,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5034,6 +8637,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -5075,6 +8718,55 @@ color: #10b981; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -5172,6 +8864,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5242,6 +8954,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5350,6 +9111,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5455,6 +9289,290 @@ color: #f8fafc; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5569,6 +9687,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5615,6 +9807,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e2e8f0; border-radius: 6px; @@ -5640,6 +9871,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #10b981; color: #ffffff; @@ -5690,10 +9954,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #f1f5f9; color: #1e293b; @@ -5729,6 +10027,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5745,6 +10061,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5805,6 +10158,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5821,6 +10281,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5866,6 +10352,67 @@ stroke: #ca8a04; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5888,6 +10435,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e2e8f0; border-radius: 6px; @@ -5896,6 +10475,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #10b981; color: #ffffff; @@ -5939,6 +10534,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #334155; @@ -6268,8 +10886,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6894,8 +11512,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -6993,7 +11611,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7191,8 +11809,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/aura-light-indigo/theme.css b/public/themes/aura-light-indigo/theme.css index 0ce6c3736..20a0f0219 100644 --- a/public/themes/aura-light-indigo/theme.css +++ b/public/themes/aura-light-indigo/theme.css @@ -292,6 +292,126 @@ } @layer primevue { + .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; } @@ -367,6 +487,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -459,6 +675,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -693,6 +1059,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -783,6 +1239,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -868,6 +1341,52 @@ background: #4F46E5; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #94a3b8; } @@ -910,6 +1429,14 @@ border-color: #f87171; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -928,6 +1455,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #cbd5e1; @@ -1056,6 +1678,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #ffffff; color: #64748b; @@ -1126,6 +1834,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1139,6 +1948,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1194,6 +2027,15 @@ border-color: #f87171; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1307,6 +2149,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #334155; @@ -1390,6 +2287,112 @@ border-color: #f87171; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1539,6 +2542,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1565,6 +2595,36 @@ background: #22c55e; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1649,6 +2709,22 @@ background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1724,6 +2800,44 @@ border-color: #f87171; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e2e8f0; border: 0 none; @@ -1766,6 +2880,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1846,6 +3020,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1909,6 +3098,74 @@ border-color: #f87171; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #6366F1; @@ -2429,6 +3686,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2510,6 +3844,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2523,6 +3890,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2569,6 +4006,241 @@ color: #4338CA; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2992,6 +4664,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3064,6 +4774,59 @@ background: #f1f5f9; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f1f5f9; color: #1e293b; @@ -3104,6 +4867,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #334155; @@ -3186,6 +4989,40 @@ color: #475569; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3258,6 +5095,117 @@ background: #f1f5f9; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #e2e8f0; border-radius: 50%; @@ -3283,6 +5231,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e2e8f0; background: #ffffff; @@ -3373,6 +5403,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3571,6 +5770,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3672,6 +5888,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e2e8f0; background: #ffffff; @@ -3717,6 +5952,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3741,6 +6037,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e2e8f0; padding: 1.125rem; @@ -3796,6 +6112,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f1f5f9; border: 0 none; @@ -3808,6 +6180,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e2e8f0; background: #ffffff; @@ -3832,6 +6264,76 @@ background: #e2e8f0; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -3891,6 +6393,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #ffffff; border: 1px solid #e2e8f0; @@ -3902,6 +6424,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #334155; @@ -3950,6 +6542,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4018,6 +6747,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #334155; @@ -4060,6 +6859,159 @@ border-top-color: #e2e8f0; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #334155; @@ -4103,6 +7055,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #334155; color: #ffffff; @@ -4123,6 +7130,50 @@ border-bottom-color: #334155; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1.125rem; @@ -4187,6 +7238,38 @@ border-color: #4338CA; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 0 none; @@ -4220,6 +7303,48 @@ color: #94a3b8; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4314,6 +7439,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4381,6 +7612,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4563,6 +7955,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4652,6 +8063,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4829,6 +8346,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4988,6 +8538,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5034,6 +8637,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -5075,6 +8718,55 @@ color: #6366F1; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -5172,6 +8864,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5242,6 +8954,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5350,6 +9111,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5455,6 +9289,290 @@ color: #f8fafc; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5569,6 +9687,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5615,6 +9807,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e2e8f0; border-radius: 6px; @@ -5640,6 +9871,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #6366F1; color: #ffffff; @@ -5690,10 +9954,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #f1f5f9; color: #1e293b; @@ -5729,6 +10027,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5745,6 +10061,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5805,6 +10158,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5821,6 +10281,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5866,6 +10352,67 @@ stroke: #ca8a04; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5888,6 +10435,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e2e8f0; border-radius: 6px; @@ -5896,6 +10475,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #6366F1; color: #ffffff; @@ -5939,6 +10534,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #334155; @@ -6268,8 +10886,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6894,8 +11512,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -6993,7 +11611,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7191,8 +11809,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/aura-light-lime/theme.css b/public/themes/aura-light-lime/theme.css index 4d1cc6731..d5df5d6b4 100644 --- a/public/themes/aura-light-lime/theme.css +++ b/public/themes/aura-light-lime/theme.css @@ -292,6 +292,126 @@ } @layer primevue { + .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; } @@ -367,6 +487,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -459,6 +675,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -693,6 +1059,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -783,6 +1239,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -868,6 +1341,52 @@ background: #65a30d; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #94a3b8; } @@ -910,6 +1429,14 @@ border-color: #f87171; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -928,6 +1455,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #cbd5e1; @@ -1056,6 +1678,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #ffffff; color: #64748b; @@ -1126,6 +1834,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1139,6 +1948,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1194,6 +2027,15 @@ border-color: #f87171; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1307,6 +2149,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #334155; @@ -1390,6 +2287,112 @@ border-color: #f87171; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1539,6 +2542,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1565,6 +2595,36 @@ background: #22c55e; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1649,6 +2709,22 @@ background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1724,6 +2800,44 @@ border-color: #f87171; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e2e8f0; border: 0 none; @@ -1766,6 +2880,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1846,6 +3020,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1909,6 +3098,74 @@ border-color: #f87171; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #84cc16; @@ -2429,6 +3686,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2510,6 +3844,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2523,6 +3890,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2569,6 +4006,241 @@ color: #4d7c0f; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2992,6 +4664,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3064,6 +4774,59 @@ background: #f1f5f9; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f1f5f9; color: #1e293b; @@ -3104,6 +4867,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #334155; @@ -3186,6 +4989,40 @@ color: #475569; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3258,6 +5095,117 @@ background: #f1f5f9; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #e2e8f0; border-radius: 50%; @@ -3283,6 +5231,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e2e8f0; background: #ffffff; @@ -3373,6 +5403,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3571,6 +5770,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3672,6 +5888,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e2e8f0; background: #ffffff; @@ -3717,6 +5952,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3741,6 +6037,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e2e8f0; padding: 1.125rem; @@ -3796,6 +6112,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f1f5f9; border: 0 none; @@ -3808,6 +6180,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e2e8f0; background: #ffffff; @@ -3832,6 +6264,76 @@ background: #e2e8f0; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -3891,6 +6393,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #ffffff; border: 1px solid #e2e8f0; @@ -3902,6 +6424,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #334155; @@ -3950,6 +6542,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4018,6 +6747,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #334155; @@ -4060,6 +6859,159 @@ border-top-color: #e2e8f0; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #334155; @@ -4103,6 +7055,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #334155; color: #ffffff; @@ -4123,6 +7130,50 @@ border-bottom-color: #334155; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1.125rem; @@ -4187,6 +7238,38 @@ border-color: #4d7c0f; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 0 none; @@ -4220,6 +7303,48 @@ color: #94a3b8; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4314,6 +7439,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4381,6 +7612,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4563,6 +7955,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4652,6 +8063,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4829,6 +8346,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4988,6 +8538,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5034,6 +8637,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -5075,6 +8718,55 @@ color: #84cc16; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -5172,6 +8864,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5242,6 +8954,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5350,6 +9111,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5455,6 +9289,290 @@ color: #f8fafc; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5569,6 +9687,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5615,6 +9807,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e2e8f0; border-radius: 6px; @@ -5640,6 +9871,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #84cc16; color: #ffffff; @@ -5690,10 +9954,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #f1f5f9; color: #1e293b; @@ -5729,6 +10027,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5745,6 +10061,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5805,6 +10158,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5821,6 +10281,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5866,6 +10352,67 @@ stroke: #ca8a04; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5888,6 +10435,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e2e8f0; border-radius: 6px; @@ -5896,6 +10475,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #84cc16; color: #ffffff; @@ -5939,6 +10534,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #334155; @@ -6268,8 +10886,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6894,8 +11512,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -6993,7 +11611,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7191,8 +11809,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/aura-light-noir/theme.css b/public/themes/aura-light-noir/theme.css index f2a9ea423..badc8fcac 100644 --- a/public/themes/aura-light-noir/theme.css +++ b/public/themes/aura-light-noir/theme.css @@ -292,6 +292,126 @@ } @layer primevue { + .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; } @@ -367,6 +487,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -459,6 +675,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -693,6 +1059,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -783,6 +1239,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -872,6 +1345,52 @@ border-color: #ffffff; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #94a3b8; } @@ -914,6 +1433,14 @@ border-color: #f87171; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -932,6 +1459,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #cbd5e1; @@ -1060,6 +1682,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #ffffff; color: #64748b; @@ -1130,6 +1838,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1143,6 +1952,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1198,6 +2031,15 @@ border-color: #f87171; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1311,6 +2153,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #334155; @@ -1394,6 +2291,112 @@ border-color: #f87171; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1543,6 +2546,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1569,6 +2599,36 @@ background: #22c55e; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1653,6 +2713,22 @@ background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1732,6 +2808,44 @@ border-color: #f87171; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e2e8f0; border: 0 none; @@ -1774,6 +2888,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1854,6 +3028,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1917,6 +3106,74 @@ border-color: #f87171; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #020617; @@ -2437,6 +3694,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2518,6 +3852,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2531,6 +3898,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2577,6 +4014,241 @@ color: #ffffff; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3000,6 +4672,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3072,6 +4782,59 @@ background: #f1f5f9; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f1f5f9; color: #1e293b; @@ -3112,6 +4875,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #334155; @@ -3194,6 +4997,40 @@ color: #475569; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3266,6 +5103,117 @@ background: #f1f5f9; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #e2e8f0; border-radius: 50%; @@ -3291,6 +5239,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e2e8f0; background: #ffffff; @@ -3381,6 +5411,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3579,6 +5778,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3680,6 +5896,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e2e8f0; background: #ffffff; @@ -3725,6 +5960,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3749,6 +6045,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e2e8f0; padding: 1.125rem; @@ -3804,6 +6120,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f1f5f9; border: 0 none; @@ -3816,6 +6188,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e2e8f0; background: #ffffff; @@ -3840,6 +6272,76 @@ background: #e2e8f0; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -3899,6 +6401,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #ffffff; border: 1px solid #e2e8f0; @@ -3910,6 +6432,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #334155; @@ -3958,6 +6550,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4026,6 +6755,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #334155; @@ -4068,6 +6867,159 @@ border-top-color: #e2e8f0; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #334155; @@ -4111,6 +7063,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #334155; color: #ffffff; @@ -4131,6 +7138,50 @@ border-bottom-color: #334155; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1.125rem; @@ -4195,6 +7246,38 @@ border-color: #1e293b; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 0 none; @@ -4228,6 +7311,48 @@ color: #94a3b8; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4322,6 +7447,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4389,6 +7620,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4571,6 +7963,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4660,6 +8071,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4837,6 +8354,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4996,6 +8546,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5042,6 +8645,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -5083,6 +8726,55 @@ color: #020617; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -5180,6 +8872,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5250,6 +8962,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5358,6 +9119,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5463,6 +9297,290 @@ color: #f8fafc; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5577,6 +9695,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5623,6 +9815,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e2e8f0; border-radius: 6px; @@ -5648,6 +9879,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #020617; color: #ffffff; @@ -5698,10 +9962,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #f1f5f9; color: #1e293b; @@ -5737,6 +10035,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5753,6 +10069,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5813,6 +10166,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5829,6 +10289,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5874,6 +10360,67 @@ stroke: #ca8a04; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5896,6 +10443,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e2e8f0; border-radius: 6px; @@ -5904,6 +10483,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #020617; color: #ffffff; @@ -5947,6 +10542,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #334155; @@ -6276,8 +10894,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6902,8 +11520,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -7001,7 +11619,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7199,8 +11817,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/aura-light-pink/theme.css b/public/themes/aura-light-pink/theme.css index ec710aab6..ca83f86bb 100644 --- a/public/themes/aura-light-pink/theme.css +++ b/public/themes/aura-light-pink/theme.css @@ -292,6 +292,126 @@ } @layer primevue { + .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; } @@ -367,6 +487,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -459,6 +675,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -693,6 +1059,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -783,6 +1239,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -868,6 +1341,52 @@ background: #db2777; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #94a3b8; } @@ -910,6 +1429,14 @@ border-color: #f87171; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -928,6 +1455,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #cbd5e1; @@ -1056,6 +1678,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #ffffff; color: #64748b; @@ -1126,6 +1834,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1139,6 +1948,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1194,6 +2027,15 @@ border-color: #f87171; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1307,6 +2149,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #334155; @@ -1390,6 +2287,112 @@ border-color: #f87171; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1539,6 +2542,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1565,6 +2595,36 @@ background: #22c55e; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1649,6 +2709,22 @@ background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1724,6 +2800,44 @@ border-color: #f87171; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e2e8f0; border: 0 none; @@ -1766,6 +2880,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1846,6 +3020,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1909,6 +3098,74 @@ border-color: #f87171; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #ec4899; @@ -2429,6 +3686,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2510,6 +3844,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2523,6 +3890,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2569,6 +4006,241 @@ color: #be185d; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2992,6 +4664,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3064,6 +4774,59 @@ background: #f1f5f9; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f1f5f9; color: #1e293b; @@ -3104,6 +4867,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #334155; @@ -3186,6 +4989,40 @@ color: #475569; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3258,6 +5095,117 @@ background: #f1f5f9; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #e2e8f0; border-radius: 50%; @@ -3283,6 +5231,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e2e8f0; background: #ffffff; @@ -3373,6 +5403,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3571,6 +5770,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3672,6 +5888,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e2e8f0; background: #ffffff; @@ -3717,6 +5952,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3741,6 +6037,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e2e8f0; padding: 1.125rem; @@ -3796,6 +6112,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f1f5f9; border: 0 none; @@ -3808,6 +6180,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e2e8f0; background: #ffffff; @@ -3832,6 +6264,76 @@ background: #e2e8f0; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -3891,6 +6393,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #ffffff; border: 1px solid #e2e8f0; @@ -3902,6 +6424,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #334155; @@ -3950,6 +6542,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4018,6 +6747,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #334155; @@ -4060,6 +6859,159 @@ border-top-color: #e2e8f0; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #334155; @@ -4103,6 +7055,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #334155; color: #ffffff; @@ -4123,6 +7130,50 @@ border-bottom-color: #334155; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1.125rem; @@ -4187,6 +7238,38 @@ border-color: #be185d; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 0 none; @@ -4220,6 +7303,48 @@ color: #94a3b8; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4314,6 +7439,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4381,6 +7612,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4563,6 +7955,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4652,6 +8063,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4829,6 +8346,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4988,6 +8538,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5034,6 +8637,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -5075,6 +8718,55 @@ color: #ec4899; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -5172,6 +8864,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5242,6 +8954,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5350,6 +9111,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5455,6 +9289,290 @@ color: #f8fafc; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5569,6 +9687,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5615,6 +9807,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e2e8f0; border-radius: 6px; @@ -5640,6 +9871,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #ec4899; color: #ffffff; @@ -5690,10 +9954,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #f1f5f9; color: #1e293b; @@ -5729,6 +10027,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5745,6 +10061,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5805,6 +10158,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5821,6 +10281,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5866,6 +10352,67 @@ stroke: #ca8a04; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5888,6 +10435,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e2e8f0; border-radius: 6px; @@ -5896,6 +10475,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #ec4899; color: #ffffff; @@ -5939,6 +10534,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #334155; @@ -6268,8 +10886,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6894,8 +11512,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -6993,7 +11611,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7191,8 +11809,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/aura-light-purple/theme.css b/public/themes/aura-light-purple/theme.css index 738cee664..fcfef867b 100644 --- a/public/themes/aura-light-purple/theme.css +++ b/public/themes/aura-light-purple/theme.css @@ -292,6 +292,126 @@ } @layer primevue { + .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; } @@ -367,6 +487,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -459,6 +675,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -693,6 +1059,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -783,6 +1239,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -868,6 +1341,52 @@ background: #7C3AED; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #94a3b8; } @@ -910,6 +1429,14 @@ border-color: #f87171; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -928,6 +1455,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #cbd5e1; @@ -1056,6 +1678,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #ffffff; color: #64748b; @@ -1126,6 +1834,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1139,6 +1948,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1194,6 +2027,15 @@ border-color: #f87171; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1307,6 +2149,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #334155; @@ -1390,6 +2287,112 @@ border-color: #f87171; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1539,6 +2542,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1565,6 +2595,36 @@ background: #22c55e; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1649,6 +2709,22 @@ background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1724,6 +2800,44 @@ border-color: #f87171; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e2e8f0; border: 0 none; @@ -1766,6 +2880,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1846,6 +3020,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1909,6 +3098,74 @@ border-color: #f87171; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #8B5CF6; @@ -2429,6 +3686,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2510,6 +3844,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2523,6 +3890,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2569,6 +4006,241 @@ color: #6D28D9; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2992,6 +4664,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3064,6 +4774,59 @@ background: #f1f5f9; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f1f5f9; color: #1e293b; @@ -3104,6 +4867,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #334155; @@ -3186,6 +4989,40 @@ color: #475569; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3258,6 +5095,117 @@ background: #f1f5f9; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #e2e8f0; border-radius: 50%; @@ -3283,6 +5231,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e2e8f0; background: #ffffff; @@ -3373,6 +5403,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3571,6 +5770,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3672,6 +5888,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e2e8f0; background: #ffffff; @@ -3717,6 +5952,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3741,6 +6037,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e2e8f0; padding: 1.125rem; @@ -3796,6 +6112,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f1f5f9; border: 0 none; @@ -3808,6 +6180,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e2e8f0; background: #ffffff; @@ -3832,6 +6264,76 @@ background: #e2e8f0; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -3891,6 +6393,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #ffffff; border: 1px solid #e2e8f0; @@ -3902,6 +6424,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #334155; @@ -3950,6 +6542,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4018,6 +6747,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #334155; @@ -4060,6 +6859,159 @@ border-top-color: #e2e8f0; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #334155; @@ -4103,6 +7055,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #334155; color: #ffffff; @@ -4123,6 +7130,50 @@ border-bottom-color: #334155; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1.125rem; @@ -4187,6 +7238,38 @@ border-color: #6D28D9; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 0 none; @@ -4220,6 +7303,48 @@ color: #94a3b8; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4314,6 +7439,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4381,6 +7612,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4563,6 +7955,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4652,6 +8063,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4829,6 +8346,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4988,6 +8538,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5034,6 +8637,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -5075,6 +8718,55 @@ color: #8B5CF6; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -5172,6 +8864,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5242,6 +8954,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5350,6 +9111,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5455,6 +9289,290 @@ color: #f8fafc; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5569,6 +9687,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5615,6 +9807,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e2e8f0; border-radius: 6px; @@ -5640,6 +9871,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #8B5CF6; color: #ffffff; @@ -5690,10 +9954,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #f1f5f9; color: #1e293b; @@ -5729,6 +10027,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5745,6 +10061,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5805,6 +10158,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5821,6 +10281,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5866,6 +10352,67 @@ stroke: #ca8a04; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5888,6 +10435,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e2e8f0; border-radius: 6px; @@ -5896,6 +10475,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #8B5CF6; color: #ffffff; @@ -5939,6 +10534,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #334155; @@ -6268,8 +10886,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6894,8 +11512,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -6993,7 +11611,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7191,8 +11809,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/aura-light-teal/theme.css b/public/themes/aura-light-teal/theme.css index 1a3e02688..89f84c7a0 100644 --- a/public/themes/aura-light-teal/theme.css +++ b/public/themes/aura-light-teal/theme.css @@ -292,6 +292,126 @@ } @layer primevue { + .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; } @@ -367,6 +487,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -459,6 +675,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -693,6 +1059,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -783,6 +1239,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 1.25rem; height: 1.25rem; @@ -868,6 +1341,52 @@ background: #0d9488; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #94a3b8; } @@ -910,6 +1429,14 @@ border-color: #f87171; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 1.5rem; height: 1.5rem; @@ -928,6 +1455,101 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #cbd5e1; @@ -1056,6 +1678,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #ffffff; color: #64748b; @@ -1126,6 +1834,107 @@ width: 2.5rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1139,6 +1948,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.5rem; height: 1.5rem; @@ -1194,6 +2027,15 @@ border-color: #f87171; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1307,6 +2149,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #334155; @@ -1390,6 +2287,112 @@ border-color: #f87171; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1539,6 +2542,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f87171; } @@ -1565,6 +2595,36 @@ background: #22c55e; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 1.25rem; height: 1.25rem; @@ -1649,6 +2709,22 @@ background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1724,6 +2800,44 @@ border-color: #f87171; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e2e8f0; border: 0 none; @@ -1766,6 +2880,66 @@ border-color: transparent; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #cbd5e1; @@ -1846,6 +3020,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1909,6 +3098,74 @@ border-color: #f87171; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #14b8a6; @@ -2429,6 +3686,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.5rem; height: 2.5rem; @@ -2510,6 +3844,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2523,6 +3890,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1.75rem; @@ -2569,6 +4006,241 @@ color: #0f766e; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2992,6 +4664,44 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3064,6 +4774,59 @@ background: #f1f5f9; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f1f5f9; color: #1e293b; @@ -3104,6 +4867,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #334155; @@ -3186,6 +4989,40 @@ color: #475569; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0 1.125rem 1.125rem 1.125rem; } @@ -3258,6 +5095,117 @@ background: #f1f5f9; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #e2e8f0; border-radius: 50%; @@ -3283,6 +5231,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e2e8f0; background: #ffffff; @@ -3373,6 +5403,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3571,6 +5770,23 @@ padding: 0.9375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.125rem 1.125rem 1.125rem 1.125rem; border: 0 none; @@ -3672,6 +5888,25 @@ padding: 0 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e2e8f0; background: #ffffff; @@ -3717,6 +5952,67 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3741,6 +6037,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e2e8f0; padding: 1.125rem; @@ -3796,6 +6112,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f1f5f9; border: 0 none; @@ -3808,6 +6180,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e2e8f0; background: #ffffff; @@ -3832,6 +6264,76 @@ background: #e2e8f0; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -3891,6 +6393,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #ffffff; border: 1px solid #e2e8f0; @@ -3902,6 +6424,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #334155; @@ -3950,6 +6542,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); @@ -4018,6 +6747,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #334155; @@ -4060,6 +6859,159 @@ border-top-color: #e2e8f0; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #334155; @@ -4103,6 +7055,61 @@ padding: 0 1.125rem 1.125rem 1.125rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #334155; color: #ffffff; @@ -4123,6 +7130,50 @@ border-bottom-color: #334155; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1.125rem; @@ -4187,6 +7238,38 @@ border-color: #0f766e; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 0 none; @@ -4220,6 +7303,48 @@ color: #94a3b8; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4314,6 +7439,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4381,6 +7612,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4563,6 +7955,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -4652,6 +8063,112 @@ margin: 2px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4829,6 +8346,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4988,6 +8538,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; @@ -5034,6 +8637,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e2e8f0; @@ -5075,6 +8718,55 @@ color: #14b8a6; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0.25rem; background: #ffffff; @@ -5172,6 +8864,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5242,6 +8954,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5350,6 +9111,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5455,6 +9289,290 @@ color: #f8fafc; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5569,6 +9687,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5615,6 +9807,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e2e8f0; border-radius: 6px; @@ -5640,6 +9871,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #14b8a6; color: #ffffff; @@ -5690,10 +9954,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #f1f5f9; color: #1e293b; @@ -5729,6 +10027,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5745,6 +10061,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5805,6 +10158,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.25rem; @@ -5821,6 +10281,32 @@ line-height: 1.25rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5866,6 +10352,67 @@ stroke: #ca8a04; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5888,6 +10435,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e2e8f0; border-radius: 6px; @@ -5896,6 +10475,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #14b8a6; color: #ffffff; @@ -5939,6 +10534,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #334155; @@ -6268,8 +10886,8 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - margin-left: -0.25rem; - margin-right: 0.25rem; + margin-left: -0.375rem; + margin-right: 0.375rem; } .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { @@ -6894,8 +11512,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-selectbutton .p-button.p-highlight::before { @@ -6993,7 +11611,7 @@ margin-top: calc(-1rem + 1px); } .p-steps .p-steps-item:first-child::before { - width: calc(50% + 1rem); + width: calc(50% + math.div($stepsItemNumberWidth,2)); transform: translateX(100%); } .p-steps .p-steps-item:last-child::before { @@ -7191,8 +11809,8 @@ position: absolute; left: 0.25rem; top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); + width: calc(100% - .5rem); + height: calc(100% - .5rem); border-radius: 4px; } .p-togglebutton.p-highlight .p-button::before { diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index aef73917d..1affb2919 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -438,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 1px #e3f3fe; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #20262e; border: 1px solid #3f4b5b; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -851,6 +1324,52 @@ border-color: #151515; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #3f4b5b; } @@ -893,6 +1412,14 @@ border-color: #f19ea6; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -911,6 +1438,101 @@ box-shadow: none; } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #20262e; border: 1px solid #3f4b5b; @@ -1039,6 +1661,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #2a323d; color: rgba(255, 255, 255, 0.6); @@ -1109,6 +1817,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } @@ -1122,6 +1931,30 @@ background-color: #3f4b5b; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1177,6 +2010,15 @@ border-color: #f19ea6; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1290,6 +2132,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1373,6 +2270,112 @@ border-color: #f19ea6; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #20262e; border: 1px solid #3f4b5b; @@ -1522,6 +2525,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } @@ -1548,6 +2578,36 @@ background: #9fdaa8; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1636,6 +2696,22 @@ border-color: #151515; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1715,6 +2791,44 @@ border-color: #f19ea6; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #3f4b5b; border: 0 none; @@ -1757,6 +2871,66 @@ border-color: #56bdff; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #20262e; border: 1px solid #3f4b5b; @@ -1837,6 +3011,21 @@ background-color: #3f4b5b; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1900,6 +3089,74 @@ border-color: #f19ea6; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #151515; background: #8dd0ff; @@ -2420,6 +3677,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2501,6 +3835,39 @@ border-radius: 4px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 4px; } @@ -2514,6 +3881,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2560,6 +3997,241 @@ color: #151515; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0; border-radius: 0; @@ -2983,6 +4655,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3055,6 +4765,59 @@ background: rgba(255, 255, 255, 0.04); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); @@ -3095,6 +4858,46 @@ box-shadow: 0 0 0 1px #e3f3fe; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #2a323d; color: #8dd0ff; @@ -3177,6 +4980,40 @@ color: #8dd0ff; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3249,6 +5086,117 @@ background: rgba(255, 255, 255, 0.04); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3274,6 +5222,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #3f4b5b; background: #2a323d; @@ -3364,6 +5394,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0; border-radius: 0; @@ -3562,6 +5761,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem 1.25rem; border: 1px solid #3f4b5b; @@ -3663,6 +5879,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #3f4b5b; background: #2a323d; @@ -3708,6 +5943,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #2a323d; } @@ -3732,6 +6028,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #3f4b5b; padding: 1rem 1.25rem; @@ -3787,6 +6103,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f4b5b; border: 0 none; @@ -3799,6 +6171,66 @@ box-shadow: 0 0 0 1px #e3f3fe; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #3f4b5b; background: #2a323d; @@ -3823,6 +6255,76 @@ background: #3f4b5b; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #3f4b5b; @@ -3882,6 +6384,26 @@ border-bottom-left-radius: 4px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #2a323d; border: 1px solid #3f4b5b; @@ -3893,6 +6415,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -3941,6 +6533,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 4px; box-shadow: none; @@ -4009,6 +6738,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4051,6 +6850,159 @@ border-top-color: #3f4b5b; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4094,6 +7046,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #3f4b5b; color: rgba(255, 255, 255, 0.87); @@ -4114,6 +7121,50 @@ border-bottom-color: #3f4b5b; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #2a323d; padding: 1rem 1.25rem; @@ -4178,6 +7229,38 @@ border-color: #1dadff; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #343e4d; border: 0 none; @@ -4211,6 +7294,48 @@ color: rgba(255, 255, 255, 0.87); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #2a323d; @@ -4305,6 +7430,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4372,6 +7603,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 1rem; background: #343e4d; @@ -4554,6 +7946,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #2a323d; @@ -4643,6 +8054,112 @@ margin: 0.5rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 1rem; background: #343e4d; @@ -4820,6 +8337,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4979,6 +8529,59 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.15s; @@ -5025,6 +8628,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #3f4b5b; @@ -5066,6 +8709,55 @@ color: rgba(255, 255, 255, 0.6); } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #2a323d; @@ -5163,6 +8855,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5215,6 +8927,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5384,6 +9218,290 @@ color: #721c24; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5498,6 +9616,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5544,6 +9736,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #3f4b5b; border-radius: 4px; @@ -5569,6 +9800,39 @@ border: 2px solid #2a323d; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #8dd0ff; color: #151515; @@ -5611,10 +9875,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 4px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #3f4b5b; color: rgba(255, 255, 255, 0.87); @@ -5650,6 +9948,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 4px; @@ -5666,6 +9982,43 @@ box-shadow: 0 0 0 1px #e3f3fe; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5726,6 +10079,113 @@ border-bottom-right-radius: 4px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5742,6 +10202,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5787,6 +10273,67 @@ stroke: #856404; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5809,6 +10356,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -5817,6 +10396,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #8dd0ff; color: #151515; @@ -5852,6 +10447,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #2a323d; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css index e13fedb79..155899058 100644 --- a/public/themes/bootstrap4-dark-purple/theme.css +++ b/public/themes/bootstrap4-dark-purple/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -438,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 1px #f0e6f5; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #20262e; border: 1px solid #3f4b5b; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -851,6 +1324,52 @@ border-color: #151515; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #3f4b5b; } @@ -893,6 +1412,14 @@ border-color: #f19ea6; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -911,6 +1438,101 @@ box-shadow: none; } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #20262e; border: 1px solid #3f4b5b; @@ -1039,6 +1661,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #2a323d; color: rgba(255, 255, 255, 0.6); @@ -1109,6 +1817,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } @@ -1122,6 +1931,30 @@ background-color: #3f4b5b; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1177,6 +2010,15 @@ border-color: #f19ea6; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1290,6 +2132,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1373,6 +2270,112 @@ border-color: #f19ea6; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #20262e; border: 1px solid #3f4b5b; @@ -1522,6 +2525,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } @@ -1548,6 +2578,36 @@ background: #9fdaa8; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1636,6 +2696,22 @@ border-color: #151515; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1715,6 +2791,44 @@ border-color: #f19ea6; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #3f4b5b; border: 0 none; @@ -1757,6 +2871,66 @@ border-color: #aa70c7; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #20262e; border: 1px solid #3f4b5b; @@ -1837,6 +3011,21 @@ background-color: #3f4b5b; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1900,6 +3089,74 @@ border-color: #f19ea6; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #151515; background: #c298d8; @@ -2420,6 +3677,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2501,6 +3835,39 @@ border-radius: 4px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 4px; } @@ -2514,6 +3881,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2560,6 +3997,241 @@ color: #151515; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0; border-radius: 0; @@ -2983,6 +4655,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3055,6 +4765,59 @@ background: rgba(255, 255, 255, 0.04); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); @@ -3095,6 +4858,46 @@ box-shadow: 0 0 0 1px #f0e6f5; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #2a323d; color: #c298d8; @@ -3177,6 +4980,40 @@ color: #c298d8; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3249,6 +5086,117 @@ background: rgba(255, 255, 255, 0.04); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3274,6 +5222,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #3f4b5b; background: #2a323d; @@ -3364,6 +5394,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0; border-radius: 0; @@ -3562,6 +5761,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem 1.25rem; border: 1px solid #3f4b5b; @@ -3663,6 +5879,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #3f4b5b; background: #2a323d; @@ -3708,6 +5943,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #2a323d; } @@ -3732,6 +6028,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #3f4b5b; padding: 1rem 1.25rem; @@ -3787,6 +6103,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f4b5b; border: 0 none; @@ -3799,6 +6171,66 @@ box-shadow: 0 0 0 1px #f0e6f5; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #3f4b5b; background: #2a323d; @@ -3823,6 +6255,76 @@ background: #3f4b5b; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #3f4b5b; @@ -3882,6 +6384,26 @@ border-bottom-left-radius: 4px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #2a323d; border: 1px solid #3f4b5b; @@ -3893,6 +6415,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -3941,6 +6533,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 4px; box-shadow: none; @@ -4009,6 +6738,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4051,6 +6850,159 @@ border-top-color: #3f4b5b; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4094,6 +7046,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #3f4b5b; color: rgba(255, 255, 255, 0.87); @@ -4114,6 +7121,50 @@ border-bottom-color: #3f4b5b; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #2a323d; padding: 1rem 1.25rem; @@ -4178,6 +7229,38 @@ border-color: #9954bb; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #343e4d; border: 0 none; @@ -4211,6 +7294,48 @@ color: rgba(255, 255, 255, 0.87); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #2a323d; @@ -4305,6 +7430,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4372,6 +7603,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 1rem; background: #343e4d; @@ -4554,6 +7946,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #2a323d; @@ -4643,6 +8054,112 @@ margin: 0.5rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 1rem; background: #343e4d; @@ -4820,6 +8337,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4979,6 +8529,59 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.15s; @@ -5025,6 +8628,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #3f4b5b; @@ -5066,6 +8709,55 @@ color: rgba(255, 255, 255, 0.6); } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #2a323d; @@ -5163,6 +8855,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5215,6 +8927,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5384,6 +9218,290 @@ color: #721c24; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5498,6 +9616,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5544,6 +9736,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #3f4b5b; border-radius: 4px; @@ -5569,6 +9800,39 @@ border: 2px solid #2a323d; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #c298d8; color: #151515; @@ -5611,10 +9875,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 4px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #3f4b5b; color: rgba(255, 255, 255, 0.87); @@ -5650,6 +9948,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 4px; @@ -5666,6 +9982,43 @@ box-shadow: 0 0 0 1px #f0e6f5; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5726,6 +10079,113 @@ border-bottom-right-radius: 4px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5742,6 +10202,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5787,6 +10273,67 @@ stroke: #856404; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5809,6 +10356,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -5817,6 +10396,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #c298d8; color: #151515; @@ -5852,6 +10447,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #2a323d; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index 0b9320e38..a9be4d01f 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -438,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #ced4da; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -851,6 +1324,52 @@ border-color: #ffffff; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #ced4da; } @@ -893,6 +1412,14 @@ border-color: #dc3545; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -911,6 +1438,101 @@ box-shadow: none; } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #ced4da; @@ -1039,6 +1661,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #e9ecef; color: #495057; @@ -1109,6 +1817,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } @@ -1122,6 +1931,30 @@ background-color: #efefef; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1177,6 +2010,15 @@ border-color: #dc3545; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1290,6 +2132,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #212529; @@ -1373,6 +2270,112 @@ border-color: #dc3545; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #ced4da; @@ -1522,6 +2525,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } @@ -1548,6 +2578,36 @@ background: #28a745; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1636,6 +2696,22 @@ border-color: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1715,6 +2791,44 @@ border-color: #dc3545; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e9ecef; border: 0 none; @@ -1757,6 +2871,66 @@ border-color: #0069d9; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #ced4da; @@ -1837,6 +3011,21 @@ background-color: #efefef; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1900,6 +3089,74 @@ border-color: #dc3545; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #007bff; @@ -2420,6 +3677,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2501,6 +3835,39 @@ border-radius: 4px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 4px; } @@ -2514,6 +3881,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2560,6 +3997,241 @@ color: #ffffff; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -2983,6 +4655,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3055,6 +4765,59 @@ background: #e9ecef; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #212529; @@ -3095,6 +4858,46 @@ box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #007bff; @@ -3177,6 +4980,40 @@ color: #007bff; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3249,6 +5086,117 @@ background: #e9ecef; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3274,6 +5222,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3364,6 +5394,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -3562,6 +5761,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem 1.25rem; border: 1px solid #dee2e6; @@ -3663,6 +5879,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -3708,6 +5943,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3732,6 +6028,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem 1.25rem; @@ -3787,6 +6103,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #efefef; border: 0 none; @@ -3799,6 +6171,66 @@ box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -3823,6 +6255,76 @@ background: #dee2e6; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #dee2e6; @@ -3882,6 +6384,26 @@ border-bottom-left-radius: 4px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #efefef; border: 1px solid #dee2e6; @@ -3893,6 +6415,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #212529; @@ -3941,6 +6533,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 4px; box-shadow: none; @@ -4009,6 +6738,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #212529; @@ -4051,6 +6850,159 @@ border-top-color: rgba(0, 0, 0, 0.2); } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #212529; @@ -4094,6 +7046,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #212529; color: #ffffff; @@ -4114,6 +7121,50 @@ border-bottom-color: #212529; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #efefef; padding: 1rem 1.25rem; @@ -4178,6 +7229,38 @@ border-color: #0062cc; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #efefef; border: 0 none; @@ -4211,6 +7294,48 @@ color: #6c757d; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4305,6 +7430,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4372,6 +7603,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 1rem; background: #efefef; @@ -4554,6 +7946,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4643,6 +8054,112 @@ margin: 0.5rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 1rem; background: #efefef; @@ -4820,6 +8337,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4979,6 +8529,59 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.15s; @@ -5025,6 +8628,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #dee2e6; @@ -5066,6 +8709,55 @@ color: #495057; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5163,6 +8855,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5215,6 +8927,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5384,6 +9218,290 @@ color: #721c24; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5498,6 +9616,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5544,6 +9736,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #dee2e6; border-radius: 4px; @@ -5569,6 +9800,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #007bff; color: #ffffff; @@ -5611,10 +9875,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 4px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #dee2e6; color: #212529; @@ -5650,6 +9948,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 4px; @@ -5666,6 +9982,43 @@ box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5726,6 +10079,113 @@ border-bottom-right-radius: 4px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5742,6 +10202,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5787,6 +10273,67 @@ stroke: #856404; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5809,6 +10356,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e9ecef; border-radius: 4px; @@ -5817,6 +10396,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #007bff; color: #ffffff; @@ -5852,6 +10447,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #212529; diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css index 346c29033..e745362ff 100644 --- a/public/themes/bootstrap4-light-purple/theme.css +++ b/public/themes/bootstrap4-light-purple/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -438,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #ced4da; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -851,6 +1324,52 @@ border-color: #ffffff; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #ced4da; } @@ -893,6 +1412,14 @@ border-color: #dc3545; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -911,6 +1438,101 @@ box-shadow: none; } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #ced4da; @@ -1039,6 +1661,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #e9ecef; color: #495057; @@ -1109,6 +1817,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } @@ -1122,6 +1931,30 @@ background-color: #efefef; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1177,6 +2010,15 @@ border-color: #dc3545; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1290,6 +2132,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #212529; @@ -1373,6 +2270,112 @@ border-color: #dc3545; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #ced4da; @@ -1522,6 +2525,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } @@ -1548,6 +2578,36 @@ background: #28a745; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1636,6 +2696,22 @@ border-color: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1715,6 +2791,44 @@ border-color: #dc3545; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e9ecef; border: 0 none; @@ -1757,6 +2871,66 @@ border-color: #7a38a7; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #ced4da; @@ -1837,6 +3011,21 @@ background-color: #efefef; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1900,6 +3089,74 @@ border-color: #dc3545; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #883cae; @@ -2420,6 +3677,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2501,6 +3835,39 @@ border-radius: 4px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 4px; } @@ -2514,6 +3881,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2560,6 +3997,241 @@ color: #ffffff; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -2983,6 +4655,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3055,6 +4765,59 @@ background: #e9ecef; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #212529; @@ -3095,6 +4858,46 @@ box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #883cae; @@ -3177,6 +4980,40 @@ color: #883cae; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3249,6 +5086,117 @@ background: #e9ecef; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3274,6 +5222,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3364,6 +5394,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -3562,6 +5761,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem 1.25rem; border: 1px solid #dee2e6; @@ -3663,6 +5879,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -3708,6 +5943,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3732,6 +6028,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem 1.25rem; @@ -3787,6 +6103,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #efefef; border: 0 none; @@ -3799,6 +6171,66 @@ box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -3823,6 +6255,76 @@ background: #dee2e6; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #dee2e6; @@ -3882,6 +6384,26 @@ border-bottom-left-radius: 4px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #efefef; border: 1px solid #dee2e6; @@ -3893,6 +6415,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #212529; @@ -3941,6 +6533,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 4px; box-shadow: none; @@ -4009,6 +6738,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #212529; @@ -4051,6 +6850,159 @@ border-top-color: rgba(0, 0, 0, 0.2); } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #212529; @@ -4094,6 +7046,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #212529; color: #ffffff; @@ -4114,6 +7121,50 @@ border-bottom-color: #212529; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #efefef; padding: 1rem 1.25rem; @@ -4178,6 +7229,38 @@ border-color: #68329e; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #efefef; border: 0 none; @@ -4211,6 +7294,48 @@ color: #6c757d; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4305,6 +7430,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4372,6 +7603,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 1rem; background: #efefef; @@ -4554,6 +7946,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4643,6 +8054,112 @@ margin: 0.5rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 1rem; background: #efefef; @@ -4820,6 +8337,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4979,6 +8529,59 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.15s; @@ -5025,6 +8628,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #dee2e6; @@ -5066,6 +8709,55 @@ color: #495057; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5163,6 +8855,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5215,6 +8927,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5384,6 +9218,290 @@ color: #721c24; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5498,6 +9616,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5544,6 +9736,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #dee2e6; border-radius: 4px; @@ -5569,6 +9800,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #883cae; color: #ffffff; @@ -5611,10 +9875,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 4px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #dee2e6; color: #212529; @@ -5650,6 +9948,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 4px; @@ -5666,6 +9982,43 @@ box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5726,6 +10079,113 @@ border-bottom-right-radius: 4px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5742,6 +10202,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5787,6 +10273,67 @@ stroke: #856404; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5809,6 +10356,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e9ecef; border-radius: 4px; @@ -5817,6 +10396,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #883cae; color: #ffffff; @@ -5852,6 +10447,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #212529; diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index a46a90e9c..59be489dc 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -438,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #a4252c; } @@ -672,6 +1038,96 @@ box-shadow: inset 0 0 0 1px #605e5c; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #605e5c; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -847,6 +1320,52 @@ background: #005a9e; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #323130; } @@ -889,6 +1408,14 @@ border-color: #a4252c; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -907,6 +1434,101 @@ box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px; } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #605e5c; @@ -1035,6 +1657,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #f3f2f1; color: #605e5c; @@ -1105,6 +1813,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a4252c; } @@ -1118,6 +1927,30 @@ background-color: #faf9f8; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1173,6 +2006,15 @@ border-color: #a4252c; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1286,6 +2128,61 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #323130; @@ -1369,6 +2266,112 @@ border-color: #a4252c; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #605e5c; @@ -1518,6 +2521,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #a4252c; } @@ -1544,6 +2574,36 @@ background: #498205; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1628,6 +2688,22 @@ background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1703,6 +2779,44 @@ border-color: #a4252c; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #c8c6c4; border: 0 none; @@ -1745,6 +2859,66 @@ border-color: #005a9e; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #605e5c; @@ -1825,6 +2999,21 @@ background-color: #faf9f8; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1888,6 +3077,74 @@ border-color: #a4252c; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #0078d4; @@ -2359,6 +3616,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2440,6 +3774,39 @@ border-radius: 2px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 2px; } @@ -2453,6 +3820,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2499,6 +3936,241 @@ color: #323130; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2922,6 +4594,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -2994,6 +4704,59 @@ background: #f3f2f1; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f2f1; color: #323130; @@ -3034,6 +4797,46 @@ box-shadow: inset 0 0 0 1px #605e5c; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #605e5c; @@ -3116,6 +4919,40 @@ color: #323130; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3188,6 +5025,117 @@ background: #f3f2f1; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3213,6 +5161,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #a19f9d; background: #ffffff; @@ -3303,6 +5333,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3501,6 +5700,23 @@ padding: 0.9375rem 0.9375rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #a19f9d; @@ -3577,6 +5793,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #a19f9d; background: #ffffff; @@ -3622,6 +5857,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3646,6 +5942,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #a19f9d; padding: 1rem; @@ -3701,6 +6017,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f3f2f1; border: 0 none; @@ -3713,6 +6085,66 @@ box-shadow: inset 0 0 0 1px #605e5c; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #a19f9d; background: #ffffff; @@ -3737,6 +6169,76 @@ background: #edebe9; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 0 none; @@ -3796,6 +6298,26 @@ border-bottom-left-radius: 2px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #faf9f8; border: 1px solid #a19f9d; @@ -3807,6 +6329,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #323130; @@ -3855,6 +6447,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.133) 0px 6.4px 14.4px 0px, rgba(0, 0, 0, 0.11) 0px 1.2px 3.6px 0px; @@ -3923,6 +6652,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #323130; @@ -3965,6 +6764,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #323130; @@ -4008,6 +6960,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #ffffff; color: #323130; @@ -4028,6 +7035,50 @@ border-bottom-color: #ffffff; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #faf9f8; padding: 1rem; @@ -4092,6 +7143,38 @@ border-color: #005a9e; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #eeeeee; @@ -4125,6 +7208,48 @@ color: #0078d4; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4219,6 +7344,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4286,6 +7517,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #ffffff; @@ -4468,6 +7860,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0; background: #ffffff; @@ -4557,6 +7968,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4734,6 +8251,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4869,6 +8419,59 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4915,6 +8518,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 0 none; @@ -4956,6 +8599,55 @@ color: #323130; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #ffffff; @@ -5053,6 +8745,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5105,6 +8817,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 2px; @@ -5189,6 +8950,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5274,6 +9108,290 @@ color: #a80000; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5388,6 +9506,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5434,6 +9626,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #edebe9; border-radius: 2px; @@ -5459,6 +9690,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #0078d4; color: #ffffff; @@ -5501,10 +9765,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 2px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #edebe9; color: #323130; @@ -5540,6 +9838,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 2px; @@ -5556,6 +9872,43 @@ box-shadow: inset 0 0 0 1px #605e5c; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5616,6 +9969,113 @@ border-bottom-right-radius: 2px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 2px; @@ -5632,6 +10092,32 @@ line-height: 2px; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5677,6 +10163,67 @@ stroke: #323130; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5699,6 +10246,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #edebe9; border-radius: 2px; @@ -5707,6 +10286,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #0078d4; color: #ffffff; @@ -5742,6 +10337,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #323130; diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css index aa19ff669..8cdb21bcf 100644 --- a/public/themes/lara-dark-amber/theme.css +++ b/public/themes/lara-dark-amber/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -691,6 +1057,96 @@ box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #111827; border: 1px solid #424b57; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 22px; height: 22px; @@ -866,6 +1339,52 @@ background: #fde68a; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #fbbf24; } @@ -908,6 +1427,14 @@ border-color: #fca5a5; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -926,6 +1453,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #111827; border: 1px solid #424b57; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1124,6 +1832,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1137,6 +1946,30 @@ background-color: #424b57; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1192,6 +2025,15 @@ border-color: #fca5a5; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1388,6 +2285,112 @@ border-color: #fca5a5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #111827; border: 1px solid #424b57; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1563,6 +2593,36 @@ background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 22px; height: 22px; @@ -1647,6 +2707,22 @@ background: #fde68a; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #fca5a5; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #424b57; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: #fbbf24; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #111827; border: 1px solid #424b57; @@ -1844,6 +3018,21 @@ background-color: #424b57; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #fca5a5; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #030712; background: #fbbf24; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2567,6 +4004,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3062,6 +4772,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3102,6 +4865,46 @@ box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3184,6 +4987,40 @@ color: rgba(255, 255, 255, 0.87); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3256,6 +5093,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #fbbf24; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3645,6 +5861,25 @@ padding: 1.25rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -3690,6 +5925,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3714,6 +6010,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -3769,6 +6085,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -3781,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #424b57; background: #1f2937; @@ -3805,6 +6237,76 @@ background: #424b57; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #424b57; @@ -3864,6 +6366,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -3875,6 +6397,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3923,6 +6515,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3991,6 +6720,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4033,6 +6832,159 @@ border-top-color: #424b57; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4076,6 +7028,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4096,6 +7103,50 @@ border-bottom-color: #424b57; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4160,6 +7211,38 @@ border-color: #fde68a; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #374151; border: 1px solid #424b57; @@ -4193,6 +7276,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4287,6 +7412,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4354,6 +7585,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #374151; @@ -4536,6 +7928,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #374151; @@ -4625,6 +8036,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4802,6 +8319,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4937,6 +8487,59 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4983,6 +8586,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -5024,6 +8667,55 @@ color: #fbbf24; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #374151; @@ -5121,6 +8813,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5191,6 +8903,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5404,6 +9238,290 @@ color: #111827; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5518,6 +9636,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5564,6 +9756,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5589,6 +9820,39 @@ border: 2px solid #1f2937; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #fbbf24; color: #030712; @@ -5639,10 +9903,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5678,6 +9976,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5694,6 +10010,43 @@ box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5754,6 +10107,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5770,6 +10230,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5815,6 +10301,67 @@ stroke: #fde047; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5837,6 +10384,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5845,6 +10424,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #fbbf24; color: #030712; @@ -5888,6 +10483,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index bef115913..1503bf398 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -691,6 +1057,96 @@ box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #111827; border: 1px solid #424b57; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 22px; height: 22px; @@ -866,6 +1339,52 @@ background: #bfdbfe; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #60a5fa; } @@ -908,6 +1427,14 @@ border-color: #fca5a5; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -926,6 +1453,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #111827; border: 1px solid #424b57; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1124,6 +1832,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1137,6 +1946,30 @@ background-color: #424b57; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1192,6 +2025,15 @@ border-color: #fca5a5; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1388,6 +2285,112 @@ border-color: #fca5a5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #111827; border: 1px solid #424b57; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1563,6 +2593,36 @@ background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 22px; height: 22px; @@ -1647,6 +2707,22 @@ background: #bfdbfe; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #fca5a5; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #424b57; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: #60a5fa; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #111827; border: 1px solid #424b57; @@ -1844,6 +3018,21 @@ background-color: #424b57; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #fca5a5; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #030712; background: #60a5fa; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2567,6 +4004,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3062,6 +4772,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3102,6 +4865,46 @@ box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3184,6 +4987,40 @@ color: rgba(255, 255, 255, 0.87); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3256,6 +5093,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #60a5fa; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3645,6 +5861,25 @@ padding: 1.25rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -3690,6 +5925,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3714,6 +6010,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -3769,6 +6085,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -3781,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #424b57; background: #1f2937; @@ -3805,6 +6237,76 @@ background: #424b57; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #424b57; @@ -3864,6 +6366,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -3875,6 +6397,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3923,6 +6515,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3991,6 +6720,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4033,6 +6832,159 @@ border-top-color: #424b57; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4076,6 +7028,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4096,6 +7103,50 @@ border-bottom-color: #424b57; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4160,6 +7211,38 @@ border-color: #bfdbfe; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #374151; border: 1px solid #424b57; @@ -4193,6 +7276,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4287,6 +7412,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4354,6 +7585,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #374151; @@ -4536,6 +7928,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #374151; @@ -4625,6 +8036,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4802,6 +8319,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4937,6 +8487,59 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4983,6 +8586,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -5024,6 +8667,55 @@ color: #60a5fa; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #374151; @@ -5121,6 +8813,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5191,6 +8903,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5404,6 +9238,290 @@ color: #111827; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5518,6 +9636,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5564,6 +9756,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5589,6 +9820,39 @@ border: 2px solid #1f2937; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #60a5fa; color: #030712; @@ -5639,10 +9903,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5678,6 +9976,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5694,6 +10010,43 @@ box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5754,6 +10107,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5770,6 +10230,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5815,6 +10301,67 @@ stroke: #fde047; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5837,6 +10384,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5845,6 +10424,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #60a5fa; color: #030712; @@ -5888,6 +10483,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css index 1a0f0269d..3e77d8691 100644 --- a/public/themes/lara-dark-cyan/theme.css +++ b/public/themes/lara-dark-cyan/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -691,6 +1057,96 @@ box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #111827; border: 1px solid #424b57; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 22px; height: 22px; @@ -866,6 +1339,52 @@ background: #a5f3fc; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #22d3ee; } @@ -908,6 +1427,14 @@ border-color: #fca5a5; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -926,6 +1453,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #111827; border: 1px solid #424b57; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1124,6 +1832,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1137,6 +1946,30 @@ background-color: #424b57; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1192,6 +2025,15 @@ border-color: #fca5a5; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1388,6 +2285,112 @@ border-color: #fca5a5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #111827; border: 1px solid #424b57; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1563,6 +2593,36 @@ background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 22px; height: 22px; @@ -1647,6 +2707,22 @@ background: #a5f3fc; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #fca5a5; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #424b57; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: #22d3ee; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #111827; border: 1px solid #424b57; @@ -1844,6 +3018,21 @@ background-color: #424b57; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #fca5a5; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #030712; background: #22d3ee; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2567,6 +4004,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3062,6 +4772,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3102,6 +4865,46 @@ box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3184,6 +4987,40 @@ color: rgba(255, 255, 255, 0.87); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3256,6 +5093,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #22d3ee; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3645,6 +5861,25 @@ padding: 1.25rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -3690,6 +5925,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3714,6 +6010,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -3769,6 +6085,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -3781,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #424b57; background: #1f2937; @@ -3805,6 +6237,76 @@ background: #424b57; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #424b57; @@ -3864,6 +6366,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -3875,6 +6397,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3923,6 +6515,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3991,6 +6720,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4033,6 +6832,159 @@ border-top-color: #424b57; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4076,6 +7028,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4096,6 +7103,50 @@ border-bottom-color: #424b57; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4160,6 +7211,38 @@ border-color: #a5f3fc; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #374151; border: 1px solid #424b57; @@ -4193,6 +7276,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4287,6 +7412,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4354,6 +7585,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #374151; @@ -4536,6 +7928,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #374151; @@ -4625,6 +8036,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4802,6 +8319,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4937,6 +8487,59 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4983,6 +8586,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -5024,6 +8667,55 @@ color: #22d3ee; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #374151; @@ -5121,6 +8813,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5191,6 +8903,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5404,6 +9238,290 @@ color: #111827; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5518,6 +9636,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5564,6 +9756,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5589,6 +9820,39 @@ border: 2px solid #1f2937; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #22d3ee; color: #030712; @@ -5639,10 +9903,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5678,6 +9976,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5694,6 +10010,43 @@ box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5754,6 +10107,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5770,6 +10230,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5815,6 +10301,67 @@ stroke: #fde047; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5837,6 +10384,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5845,6 +10424,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #22d3ee; color: #030712; @@ -5888,6 +10483,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css index cef2f9111..725af1451 100644 --- a/public/themes/lara-dark-green/theme.css +++ b/public/themes/lara-dark-green/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -691,6 +1057,96 @@ box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #111827; border: 1px solid #424b57; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 22px; height: 22px; @@ -866,6 +1339,52 @@ background: #a7f3d0; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #34d399; } @@ -908,6 +1427,14 @@ border-color: #fca5a5; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -926,6 +1453,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #111827; border: 1px solid #424b57; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1124,6 +1832,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1137,6 +1946,30 @@ background-color: #424b57; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1192,6 +2025,15 @@ border-color: #fca5a5; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1388,6 +2285,112 @@ border-color: #fca5a5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #111827; border: 1px solid #424b57; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1563,6 +2593,36 @@ background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 22px; height: 22px; @@ -1647,6 +2707,22 @@ background: #a7f3d0; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #fca5a5; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #424b57; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: #34d399; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #111827; border: 1px solid #424b57; @@ -1844,6 +3018,21 @@ background-color: #424b57; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #fca5a5; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #030712; background: #34d399; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2567,6 +4004,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3062,6 +4772,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3102,6 +4865,46 @@ box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3184,6 +4987,40 @@ color: rgba(255, 255, 255, 0.87); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3256,6 +5093,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #34d399; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3645,6 +5861,25 @@ padding: 1.25rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -3690,6 +5925,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3714,6 +6010,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -3769,6 +6085,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -3781,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #424b57; background: #1f2937; @@ -3805,6 +6237,76 @@ background: #424b57; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #424b57; @@ -3864,6 +6366,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -3875,6 +6397,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3923,6 +6515,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3991,6 +6720,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4033,6 +6832,159 @@ border-top-color: #424b57; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4076,6 +7028,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4096,6 +7103,50 @@ border-bottom-color: #424b57; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4160,6 +7211,38 @@ border-color: #a7f3d0; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #374151; border: 1px solid #424b57; @@ -4193,6 +7276,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4287,6 +7412,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4354,6 +7585,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #374151; @@ -4536,6 +7928,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #374151; @@ -4625,6 +8036,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4802,6 +8319,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4937,6 +8487,59 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4983,6 +8586,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -5024,6 +8667,55 @@ color: #34d399; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #374151; @@ -5121,6 +8813,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5191,6 +8903,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5404,6 +9238,290 @@ color: #111827; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5518,6 +9636,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5564,6 +9756,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5589,6 +9820,39 @@ border: 2px solid #1f2937; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #34d399; color: #030712; @@ -5639,10 +9903,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5678,6 +9976,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5694,6 +10010,43 @@ box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5754,6 +10107,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5770,6 +10230,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5815,6 +10301,67 @@ stroke: #fde047; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5837,6 +10384,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5845,6 +10424,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #34d399; color: #030712; @@ -5888,6 +10483,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index 8172f74c4..4b9343073 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -691,6 +1057,96 @@ box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #111827; border: 1px solid #424b57; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 22px; height: 22px; @@ -866,6 +1339,52 @@ background: #c7d2fe; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #818cf8; } @@ -908,6 +1427,14 @@ border-color: #fca5a5; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -926,6 +1453,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #111827; border: 1px solid #424b57; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1124,6 +1832,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1137,6 +1946,30 @@ background-color: #424b57; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1192,6 +2025,15 @@ border-color: #fca5a5; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1388,6 +2285,112 @@ border-color: #fca5a5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #111827; border: 1px solid #424b57; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1563,6 +2593,36 @@ background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 22px; height: 22px; @@ -1647,6 +2707,22 @@ background: #c7d2fe; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #fca5a5; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #424b57; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: #818cf8; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #111827; border: 1px solid #424b57; @@ -1844,6 +3018,21 @@ background-color: #424b57; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #fca5a5; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #030712; background: #818cf8; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2567,6 +4004,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3062,6 +4772,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3102,6 +4865,46 @@ box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3184,6 +4987,40 @@ color: rgba(255, 255, 255, 0.87); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3256,6 +5093,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #818cf8; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3645,6 +5861,25 @@ padding: 1.25rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -3690,6 +5925,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3714,6 +6010,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -3769,6 +6085,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -3781,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #424b57; background: #1f2937; @@ -3805,6 +6237,76 @@ background: #424b57; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #424b57; @@ -3864,6 +6366,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -3875,6 +6397,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3923,6 +6515,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3991,6 +6720,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4033,6 +6832,159 @@ border-top-color: #424b57; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4076,6 +7028,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4096,6 +7103,50 @@ border-bottom-color: #424b57; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4160,6 +7211,38 @@ border-color: #c7d2fe; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #374151; border: 1px solid #424b57; @@ -4193,6 +7276,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4287,6 +7412,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4354,6 +7585,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #374151; @@ -4536,6 +7928,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #374151; @@ -4625,6 +8036,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4802,6 +8319,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4937,6 +8487,59 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4983,6 +8586,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -5024,6 +8667,55 @@ color: #818cf8; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #374151; @@ -5121,6 +8813,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5191,6 +8903,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5404,6 +9238,290 @@ color: #111827; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5518,6 +9636,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5564,6 +9756,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5589,6 +9820,39 @@ border: 2px solid #1f2937; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #818cf8; color: #030712; @@ -5639,10 +9903,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5678,6 +9976,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5694,6 +10010,43 @@ box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5754,6 +10107,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5770,6 +10230,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5815,6 +10301,67 @@ stroke: #fde047; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5837,6 +10384,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5845,6 +10424,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #818cf8; color: #030712; @@ -5888,6 +10483,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css index 2d1b2ac25..562ad53f1 100644 --- a/public/themes/lara-dark-pink/theme.css +++ b/public/themes/lara-dark-pink/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -691,6 +1057,96 @@ box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #111827; border: 1px solid #424b57; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 22px; height: 22px; @@ -866,6 +1339,52 @@ background: #fbcfe8; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #f472b6; } @@ -908,6 +1427,14 @@ border-color: #fca5a5; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -926,6 +1453,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #111827; border: 1px solid #424b57; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1124,6 +1832,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1137,6 +1946,30 @@ background-color: #424b57; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1192,6 +2025,15 @@ border-color: #fca5a5; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1388,6 +2285,112 @@ border-color: #fca5a5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #111827; border: 1px solid #424b57; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1563,6 +2593,36 @@ background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 22px; height: 22px; @@ -1647,6 +2707,22 @@ background: #fbcfe8; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #fca5a5; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #424b57; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: #f472b6; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #111827; border: 1px solid #424b57; @@ -1844,6 +3018,21 @@ background-color: #424b57; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #fca5a5; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #030712; background: #f472b6; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2567,6 +4004,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3062,6 +4772,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3102,6 +4865,46 @@ box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3184,6 +4987,40 @@ color: rgba(255, 255, 255, 0.87); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3256,6 +5093,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #f472b6; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3645,6 +5861,25 @@ padding: 1.25rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -3690,6 +5925,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3714,6 +6010,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -3769,6 +6085,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -3781,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #424b57; background: #1f2937; @@ -3805,6 +6237,76 @@ background: #424b57; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #424b57; @@ -3864,6 +6366,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -3875,6 +6397,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3923,6 +6515,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3991,6 +6720,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4033,6 +6832,159 @@ border-top-color: #424b57; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4076,6 +7028,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4096,6 +7103,50 @@ border-bottom-color: #424b57; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4160,6 +7211,38 @@ border-color: #fbcfe8; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #374151; border: 1px solid #424b57; @@ -4193,6 +7276,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4287,6 +7412,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4354,6 +7585,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #374151; @@ -4536,6 +7928,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #374151; @@ -4625,6 +8036,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4802,6 +8319,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4937,6 +8487,59 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4983,6 +8586,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -5024,6 +8667,55 @@ color: #f472b6; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #374151; @@ -5121,6 +8813,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5191,6 +8903,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5404,6 +9238,290 @@ color: #111827; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5518,6 +9636,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5564,6 +9756,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5589,6 +9820,39 @@ border: 2px solid #1f2937; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #f472b6; color: #030712; @@ -5639,10 +9903,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5678,6 +9976,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5694,6 +10010,43 @@ box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5754,6 +10107,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5770,6 +10230,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5815,6 +10301,67 @@ stroke: #fde047; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5837,6 +10384,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5845,6 +10424,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #f472b6; color: #030712; @@ -5888,6 +10483,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css index de30873a4..eee01d740 100644 --- a/public/themes/lara-dark-purple/theme.css +++ b/public/themes/lara-dark-purple/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -691,6 +1057,96 @@ box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #111827; border: 1px solid #424b57; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 22px; height: 22px; @@ -866,6 +1339,52 @@ background: #ddd6fe; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #a78bfa; } @@ -908,6 +1427,14 @@ border-color: #fca5a5; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -926,6 +1453,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #111827; border: 1px solid #424b57; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1124,6 +1832,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1137,6 +1946,30 @@ background-color: #424b57; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1192,6 +2025,15 @@ border-color: #fca5a5; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1388,6 +2285,112 @@ border-color: #fca5a5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #111827; border: 1px solid #424b57; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1563,6 +2593,36 @@ background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 22px; height: 22px; @@ -1647,6 +2707,22 @@ background: #ddd6fe; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #fca5a5; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #424b57; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: #a78bfa; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #111827; border: 1px solid #424b57; @@ -1844,6 +3018,21 @@ background-color: #424b57; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #fca5a5; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #030712; background: #a78bfa; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2567,6 +4004,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3062,6 +4772,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3102,6 +4865,46 @@ box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3184,6 +4987,40 @@ color: rgba(255, 255, 255, 0.87); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3256,6 +5093,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #a78bfa; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3645,6 +5861,25 @@ padding: 1.25rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -3690,6 +5925,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3714,6 +6010,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -3769,6 +6085,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -3781,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #424b57; background: #1f2937; @@ -3805,6 +6237,76 @@ background: #424b57; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #424b57; @@ -3864,6 +6366,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -3875,6 +6397,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3923,6 +6515,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3991,6 +6720,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4033,6 +6832,159 @@ border-top-color: #424b57; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4076,6 +7028,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4096,6 +7103,50 @@ border-bottom-color: #424b57; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4160,6 +7211,38 @@ border-color: #ddd6fe; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #374151; border: 1px solid #424b57; @@ -4193,6 +7276,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4287,6 +7412,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4354,6 +7585,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #374151; @@ -4536,6 +7928,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #374151; @@ -4625,6 +8036,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4802,6 +8319,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4937,6 +8487,59 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4983,6 +8586,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -5024,6 +8667,55 @@ color: #a78bfa; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #374151; @@ -5121,6 +8813,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5191,6 +8903,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5404,6 +9238,290 @@ color: #111827; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5518,6 +9636,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5564,6 +9756,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5589,6 +9820,39 @@ border: 2px solid #1f2937; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #a78bfa; color: #030712; @@ -5639,10 +9903,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5678,6 +9976,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5694,6 +10010,43 @@ box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5754,6 +10107,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5770,6 +10230,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5815,6 +10301,67 @@ stroke: #fde047; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5837,6 +10384,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5845,6 +10424,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #a78bfa; color: #030712; @@ -5888,6 +10483,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index b5418ec65..e65c0cc86 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -691,6 +1057,96 @@ box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #111827; border: 1px solid #424b57; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 22px; height: 22px; @@ -866,6 +1339,52 @@ background: #99f6e4; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #2dd4bf; } @@ -908,6 +1427,14 @@ border-color: #fca5a5; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -926,6 +1453,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #111827; border: 1px solid #424b57; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1124,6 +1832,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1137,6 +1946,30 @@ background-color: #424b57; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1192,6 +2025,15 @@ border-color: #fca5a5; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1388,6 +2285,112 @@ border-color: #fca5a5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #111827; border: 1px solid #424b57; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1563,6 +2593,36 @@ background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 22px; height: 22px; @@ -1647,6 +2707,22 @@ background: #99f6e4; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #fca5a5; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #424b57; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: #2dd4bf; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #111827; border: 1px solid #424b57; @@ -1844,6 +3018,21 @@ background-color: #424b57; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #fca5a5; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #030712; background: #2dd4bf; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2567,6 +4004,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3062,6 +4772,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3102,6 +4865,46 @@ box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3184,6 +4987,40 @@ color: rgba(255, 255, 255, 0.87); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3256,6 +5093,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #2dd4bf; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3645,6 +5861,25 @@ padding: 1.25rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -3690,6 +5925,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3714,6 +6010,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -3769,6 +6085,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -3781,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #424b57; background: #1f2937; @@ -3805,6 +6237,76 @@ background: #424b57; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #424b57; @@ -3864,6 +6366,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -3875,6 +6397,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3923,6 +6515,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3991,6 +6720,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4033,6 +6832,159 @@ border-top-color: #424b57; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4076,6 +7028,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4096,6 +7103,50 @@ border-bottom-color: #424b57; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4160,6 +7211,38 @@ border-color: #99f6e4; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #374151; border: 1px solid #424b57; @@ -4193,6 +7276,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4287,6 +7412,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4354,6 +7585,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #374151; @@ -4536,6 +7928,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #374151; @@ -4625,6 +8036,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4802,6 +8319,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4937,6 +8487,59 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4983,6 +8586,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -5024,6 +8667,55 @@ color: #2dd4bf; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #374151; @@ -5121,6 +8813,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5191,6 +8903,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5404,6 +9238,290 @@ color: #111827; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5518,6 +9636,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5564,6 +9756,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5589,6 +9820,39 @@ border: 2px solid #1f2937; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #2dd4bf; color: #030712; @@ -5639,10 +9903,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5678,6 +9976,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5694,6 +10010,43 @@ box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5754,6 +10107,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5770,6 +10230,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5815,6 +10301,67 @@ stroke: #fde047; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5837,6 +10384,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5845,6 +10424,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #2dd4bf; color: #030712; @@ -5888,6 +10483,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css index 4010de8eb..bf8c04940 100644 --- a/public/themes/lara-light-amber/theme.css +++ b/public/themes/lara-light-amber/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -691,6 +1057,96 @@ box-shadow: 0 0 0 0.2rem #fef08a; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 22px; height: 22px; @@ -866,6 +1339,52 @@ background: #b45309; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #f59e0b; } @@ -908,6 +1427,14 @@ border-color: #e24c4c; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -926,6 +1453,101 @@ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1124,6 +1832,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1137,6 +1946,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1192,6 +2025,15 @@ border-color: #e24c4c; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #4b5563; @@ -1388,6 +2285,112 @@ border-color: #e24c4c; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1563,6 +2593,36 @@ background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 22px; height: 22px; @@ -1647,6 +2707,22 @@ background: #b45309; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #e24c4c; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: #f59e0b; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1844,6 +3018,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #e24c4c; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #f59e0b; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2567,6 +4004,241 @@ color: #b45309; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3062,6 +4772,59 @@ background: #f3f4f6; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3102,6 +4865,46 @@ box-shadow: 0 0 0 0.2rem #fef08a; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #6b7280; @@ -3184,6 +4987,40 @@ color: #374151; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3256,6 +5093,117 @@ background: #f3f4f6; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #f59e0b; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3645,6 +5861,25 @@ padding: 1.25rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -3690,6 +5925,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3714,6 +6010,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -3769,6 +6085,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -3781,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem #fef08a; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -3805,6 +6237,76 @@ background: #e5e7eb; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -3864,6 +6366,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -3875,6 +6397,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -3923,6 +6515,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -3991,6 +6720,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -4033,6 +6832,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #4b5563; @@ -4076,6 +7028,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4096,6 +7103,50 @@ border-bottom-color: #4b5563; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4160,6 +7211,38 @@ border-color: #b45309; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4193,6 +7276,48 @@ color: #6b7280; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4287,6 +7412,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4354,6 +7585,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f9fafb; @@ -4536,6 +7928,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4625,6 +8036,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4802,6 +8319,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4937,6 +8487,59 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4983,6 +8586,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -5024,6 +8667,55 @@ color: #f59e0b; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5121,6 +8813,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5191,6 +8903,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5404,6 +9238,290 @@ color: #ffffff; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5518,6 +9636,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5564,6 +9756,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5589,6 +9820,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #f59e0b; color: #ffffff; @@ -5639,10 +9903,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5678,6 +9976,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5694,6 +10010,43 @@ box-shadow: 0 0 0 0.2rem #fef08a; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5754,6 +10107,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5770,6 +10230,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5815,6 +10301,67 @@ stroke: #cc8925; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5837,6 +10384,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -5845,6 +10424,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #f59e0b; color: #ffffff; @@ -5888,6 +10483,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #4b5563; diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index 29ebe0b4f..840600c3b 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -691,6 +1057,96 @@ box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 22px; height: 22px; @@ -866,6 +1339,52 @@ background: #1D4ED8; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #3B82F6; } @@ -908,6 +1427,14 @@ border-color: #e24c4c; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -926,6 +1453,101 @@ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1124,6 +1832,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1137,6 +1946,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1192,6 +2025,15 @@ border-color: #e24c4c; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #4b5563; @@ -1388,6 +2285,112 @@ border-color: #e24c4c; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1563,6 +2593,36 @@ background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 22px; height: 22px; @@ -1647,6 +2707,22 @@ background: #1D4ED8; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #e24c4c; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: #3B82F6; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1844,6 +3018,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #e24c4c; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #3B82F6; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2567,6 +4004,241 @@ color: #1D4ED8; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3062,6 +4772,59 @@ background: #f3f4f6; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3102,6 +4865,46 @@ box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #6b7280; @@ -3184,6 +4987,40 @@ color: #374151; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3256,6 +5093,117 @@ background: #f3f4f6; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #3B82F6; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3645,6 +5861,25 @@ padding: 1.25rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -3690,6 +5925,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3714,6 +6010,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -3769,6 +6085,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -3781,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -3805,6 +6237,76 @@ background: #e5e7eb; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -3864,6 +6366,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -3875,6 +6397,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -3923,6 +6515,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -3991,6 +6720,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -4033,6 +6832,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #4b5563; @@ -4076,6 +7028,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4096,6 +7103,50 @@ border-bottom-color: #4b5563; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4160,6 +7211,38 @@ border-color: #1D4ED8; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4193,6 +7276,48 @@ color: #6b7280; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4287,6 +7412,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4354,6 +7585,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f9fafb; @@ -4536,6 +7928,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4625,6 +8036,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4802,6 +8319,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4937,6 +8487,59 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4983,6 +8586,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -5024,6 +8667,55 @@ color: #3B82F6; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5121,6 +8813,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5191,6 +8903,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5404,6 +9238,290 @@ color: #ffffff; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5518,6 +9636,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5564,6 +9756,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5589,6 +9820,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #3B82F6; color: #ffffff; @@ -5639,10 +9903,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5678,6 +9976,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5694,6 +10010,43 @@ box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5754,6 +10107,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5770,6 +10230,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5815,6 +10301,67 @@ stroke: #cc8925; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5837,6 +10384,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -5845,6 +10424,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #3B82F6; color: #ffffff; @@ -5888,6 +10483,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #4b5563; diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css index 9c5dac1b4..fd0a37818 100644 --- a/public/themes/lara-light-cyan/theme.css +++ b/public/themes/lara-light-cyan/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -691,6 +1057,96 @@ box-shadow: 0 0 0 0.2rem #a5f3fc; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 22px; height: 22px; @@ -866,6 +1339,52 @@ background: #0e7490; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #06b6d4; } @@ -908,6 +1427,14 @@ border-color: #e24c4c; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -926,6 +1453,101 @@ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1124,6 +1832,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1137,6 +1946,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1192,6 +2025,15 @@ border-color: #e24c4c; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #4b5563; @@ -1388,6 +2285,112 @@ border-color: #e24c4c; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1563,6 +2593,36 @@ background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 22px; height: 22px; @@ -1647,6 +2707,22 @@ background: #0e7490; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #e24c4c; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: #06b6d4; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1844,6 +3018,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #e24c4c; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #06b6d4; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2567,6 +4004,241 @@ color: #0e7490; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3062,6 +4772,59 @@ background: #f3f4f6; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3102,6 +4865,46 @@ box-shadow: 0 0 0 0.2rem #a5f3fc; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #6b7280; @@ -3184,6 +4987,40 @@ color: #374151; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3256,6 +5093,117 @@ background: #f3f4f6; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #06b6d4; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3645,6 +5861,25 @@ padding: 1.25rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -3690,6 +5925,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3714,6 +6010,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -3769,6 +6085,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -3781,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem #a5f3fc; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -3805,6 +6237,76 @@ background: #e5e7eb; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -3864,6 +6366,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -3875,6 +6397,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -3923,6 +6515,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -3991,6 +6720,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -4033,6 +6832,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #4b5563; @@ -4076,6 +7028,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4096,6 +7103,50 @@ border-bottom-color: #4b5563; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4160,6 +7211,38 @@ border-color: #0e7490; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4193,6 +7276,48 @@ color: #6b7280; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4287,6 +7412,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4354,6 +7585,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f9fafb; @@ -4536,6 +7928,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4625,6 +8036,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4802,6 +8319,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4937,6 +8487,59 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4983,6 +8586,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -5024,6 +8667,55 @@ color: #06b6d4; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5121,6 +8813,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5191,6 +8903,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5404,6 +9238,290 @@ color: #ffffff; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5518,6 +9636,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5564,6 +9756,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5589,6 +9820,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #06b6d4; color: #ffffff; @@ -5639,10 +9903,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5678,6 +9976,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5694,6 +10010,43 @@ box-shadow: 0 0 0 0.2rem #a5f3fc; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5754,6 +10107,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5770,6 +10230,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5815,6 +10301,67 @@ stroke: #cc8925; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5837,6 +10384,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -5845,6 +10424,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #06b6d4; color: #ffffff; @@ -5888,6 +10483,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #4b5563; diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css index 985713488..15b6a6653 100644 --- a/public/themes/lara-light-green/theme.css +++ b/public/themes/lara-light-green/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -691,6 +1057,96 @@ box-shadow: 0 0 0 0.2rem #a7f3d0; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 22px; height: 22px; @@ -866,6 +1339,52 @@ background: #047857; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #10b981; } @@ -908,6 +1427,14 @@ border-color: #e24c4c; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -926,6 +1453,101 @@ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1124,6 +1832,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1137,6 +1946,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1192,6 +2025,15 @@ border-color: #e24c4c; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #4b5563; @@ -1388,6 +2285,112 @@ border-color: #e24c4c; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1563,6 +2593,36 @@ background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 22px; height: 22px; @@ -1647,6 +2707,22 @@ background: #047857; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #e24c4c; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: #10b981; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1844,6 +3018,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #e24c4c; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #10b981; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2567,6 +4004,241 @@ color: #047857; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3062,6 +4772,59 @@ background: #f3f4f6; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3102,6 +4865,46 @@ box-shadow: 0 0 0 0.2rem #a7f3d0; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #6b7280; @@ -3184,6 +4987,40 @@ color: #374151; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3256,6 +5093,117 @@ background: #f3f4f6; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #10b981; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3645,6 +5861,25 @@ padding: 1.25rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -3690,6 +5925,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3714,6 +6010,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -3769,6 +6085,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -3781,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem #a7f3d0; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -3805,6 +6237,76 @@ background: #e5e7eb; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -3864,6 +6366,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -3875,6 +6397,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -3923,6 +6515,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -3991,6 +6720,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -4033,6 +6832,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #4b5563; @@ -4076,6 +7028,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4096,6 +7103,50 @@ border-bottom-color: #4b5563; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4160,6 +7211,38 @@ border-color: #047857; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4193,6 +7276,48 @@ color: #6b7280; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4287,6 +7412,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4354,6 +7585,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f9fafb; @@ -4536,6 +7928,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4625,6 +8036,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4802,6 +8319,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4937,6 +8487,59 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4983,6 +8586,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -5024,6 +8667,55 @@ color: #10b981; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5121,6 +8813,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5191,6 +8903,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5404,6 +9238,290 @@ color: #ffffff; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5518,6 +9636,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5564,6 +9756,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5589,6 +9820,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #10b981; color: #ffffff; @@ -5639,10 +9903,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5678,6 +9976,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5694,6 +10010,43 @@ box-shadow: 0 0 0 0.2rem #a7f3d0; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5754,6 +10107,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5770,6 +10230,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5815,6 +10301,67 @@ stroke: #cc8925; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5837,6 +10384,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -5845,6 +10424,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #10b981; color: #ffffff; @@ -5888,6 +10483,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #4b5563; diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index 407b1c06a..d5298d576 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -691,6 +1057,96 @@ box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 22px; height: 22px; @@ -866,6 +1339,52 @@ background: #4338CA; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #6366F1; } @@ -908,6 +1427,14 @@ border-color: #e24c4c; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -926,6 +1453,101 @@ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1124,6 +1832,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1137,6 +1946,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1192,6 +2025,15 @@ border-color: #e24c4c; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #4b5563; @@ -1388,6 +2285,112 @@ border-color: #e24c4c; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1563,6 +2593,36 @@ background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 22px; height: 22px; @@ -1647,6 +2707,22 @@ background: #4338CA; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #e24c4c; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: #6366F1; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1844,6 +3018,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #e24c4c; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #6366F1; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2567,6 +4004,241 @@ color: #4338CA; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3062,6 +4772,59 @@ background: #f3f4f6; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3102,6 +4865,46 @@ box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #6b7280; @@ -3184,6 +4987,40 @@ color: #374151; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3256,6 +5093,117 @@ background: #f3f4f6; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #6366F1; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3645,6 +5861,25 @@ padding: 1.25rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -3690,6 +5925,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3714,6 +6010,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -3769,6 +6085,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -3781,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -3805,6 +6237,76 @@ background: #e5e7eb; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -3864,6 +6366,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -3875,6 +6397,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -3923,6 +6515,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -3991,6 +6720,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -4033,6 +6832,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #4b5563; @@ -4076,6 +7028,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4096,6 +7103,50 @@ border-bottom-color: #4b5563; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4160,6 +7211,38 @@ border-color: #4338CA; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4193,6 +7276,48 @@ color: #6b7280; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4287,6 +7412,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4354,6 +7585,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f9fafb; @@ -4536,6 +7928,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4625,6 +8036,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4802,6 +8319,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4937,6 +8487,59 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4983,6 +8586,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -5024,6 +8667,55 @@ color: #6366F1; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5121,6 +8813,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5191,6 +8903,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5404,6 +9238,290 @@ color: #ffffff; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5518,6 +9636,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5564,6 +9756,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5589,6 +9820,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #6366F1; color: #ffffff; @@ -5639,10 +9903,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5678,6 +9976,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5694,6 +10010,43 @@ box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5754,6 +10107,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5770,6 +10230,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5815,6 +10301,67 @@ stroke: #cc8925; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5837,6 +10384,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -5845,6 +10424,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #6366F1; color: #ffffff; @@ -5888,6 +10483,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #4b5563; diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css index 7617e4fec..61e9f833b 100644 --- a/public/themes/lara-light-pink/theme.css +++ b/public/themes/lara-light-pink/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -691,6 +1057,96 @@ box-shadow: 0 0 0 0.2rem #fbcfe8; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 22px; height: 22px; @@ -866,6 +1339,52 @@ background: #be185d; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #ec4899; } @@ -908,6 +1427,14 @@ border-color: #e24c4c; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -926,6 +1453,101 @@ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1124,6 +1832,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1137,6 +1946,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1192,6 +2025,15 @@ border-color: #e24c4c; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #4b5563; @@ -1388,6 +2285,112 @@ border-color: #e24c4c; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1563,6 +2593,36 @@ background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 22px; height: 22px; @@ -1647,6 +2707,22 @@ background: #be185d; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #e24c4c; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: #ec4899; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1844,6 +3018,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #e24c4c; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #ec4899; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2567,6 +4004,241 @@ color: #be185d; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3062,6 +4772,59 @@ background: #f3f4f6; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3102,6 +4865,46 @@ box-shadow: 0 0 0 0.2rem #fbcfe8; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #6b7280; @@ -3184,6 +4987,40 @@ color: #374151; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3256,6 +5093,117 @@ background: #f3f4f6; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #ec4899; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3645,6 +5861,25 @@ padding: 1.25rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -3690,6 +5925,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3714,6 +6010,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -3769,6 +6085,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -3781,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem #fbcfe8; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -3805,6 +6237,76 @@ background: #e5e7eb; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -3864,6 +6366,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -3875,6 +6397,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -3923,6 +6515,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -3991,6 +6720,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -4033,6 +6832,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #4b5563; @@ -4076,6 +7028,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4096,6 +7103,50 @@ border-bottom-color: #4b5563; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4160,6 +7211,38 @@ border-color: #be185d; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4193,6 +7276,48 @@ color: #6b7280; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4287,6 +7412,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4354,6 +7585,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f9fafb; @@ -4536,6 +7928,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4625,6 +8036,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4802,6 +8319,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4937,6 +8487,59 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4983,6 +8586,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -5024,6 +8667,55 @@ color: #ec4899; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5121,6 +8813,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5191,6 +8903,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5404,6 +9238,290 @@ color: #ffffff; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5518,6 +9636,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5564,6 +9756,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5589,6 +9820,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #ec4899; color: #ffffff; @@ -5639,10 +9903,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5678,6 +9976,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5694,6 +10010,43 @@ box-shadow: 0 0 0 0.2rem #fbcfe8; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5754,6 +10107,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5770,6 +10230,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5815,6 +10301,67 @@ stroke: #cc8925; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5837,6 +10384,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -5845,6 +10424,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #ec4899; color: #ffffff; @@ -5888,6 +10483,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #4b5563; diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css index d1f1c0e0e..55eddec68 100644 --- a/public/themes/lara-light-purple/theme.css +++ b/public/themes/lara-light-purple/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -691,6 +1057,96 @@ box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 22px; height: 22px; @@ -866,6 +1339,52 @@ background: #6D28D9; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #8B5CF6; } @@ -908,6 +1427,14 @@ border-color: #e24c4c; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -926,6 +1453,101 @@ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1124,6 +1832,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1137,6 +1946,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1192,6 +2025,15 @@ border-color: #e24c4c; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #4b5563; @@ -1388,6 +2285,112 @@ border-color: #e24c4c; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1563,6 +2593,36 @@ background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 22px; height: 22px; @@ -1647,6 +2707,22 @@ background: #6D28D9; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #e24c4c; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: #8B5CF6; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1844,6 +3018,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #e24c4c; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #8B5CF6; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2567,6 +4004,241 @@ color: #6D28D9; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3062,6 +4772,59 @@ background: #f3f4f6; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3102,6 +4865,46 @@ box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #6b7280; @@ -3184,6 +4987,40 @@ color: #374151; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3256,6 +5093,117 @@ background: #f3f4f6; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #8B5CF6; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3645,6 +5861,25 @@ padding: 1.25rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -3690,6 +5925,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3714,6 +6010,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -3769,6 +6085,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -3781,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -3805,6 +6237,76 @@ background: #e5e7eb; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -3864,6 +6366,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -3875,6 +6397,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -3923,6 +6515,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -3991,6 +6720,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -4033,6 +6832,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #4b5563; @@ -4076,6 +7028,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4096,6 +7103,50 @@ border-bottom-color: #4b5563; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4160,6 +7211,38 @@ border-color: #6D28D9; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4193,6 +7276,48 @@ color: #6b7280; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4287,6 +7412,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4354,6 +7585,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f9fafb; @@ -4536,6 +7928,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4625,6 +8036,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4802,6 +8319,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4937,6 +8487,59 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4983,6 +8586,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -5024,6 +8667,55 @@ color: #8B5CF6; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5121,6 +8813,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5191,6 +8903,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5404,6 +9238,290 @@ color: #ffffff; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5518,6 +9636,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5564,6 +9756,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5589,6 +9820,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #8B5CF6; color: #ffffff; @@ -5639,10 +9903,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5678,6 +9976,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5694,6 +10010,43 @@ box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5754,6 +10107,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5770,6 +10230,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5815,6 +10301,67 @@ stroke: #cc8925; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5837,6 +10384,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -5845,6 +10424,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #8B5CF6; color: #ffffff; @@ -5888,6 +10483,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #4b5563; diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index ae4306867..ce1fc6e60 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .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; } @@ -365,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -457,6 +673,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -691,6 +1057,96 @@ box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -781,6 +1237,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 22px; height: 22px; @@ -866,6 +1339,52 @@ background: #0f766e; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #14b8a6; } @@ -908,6 +1427,14 @@ border-color: #e24c4c; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -926,6 +1453,101 @@ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; @@ -1054,6 +1676,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1124,6 +1832,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1137,6 +1946,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1192,6 +2025,15 @@ border-color: #e24c4c; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1305,6 +2147,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #4b5563; @@ -1388,6 +2285,112 @@ border-color: #e24c4c; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1537,6 +2540,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1563,6 +2593,36 @@ background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 22px; height: 22px; @@ -1647,6 +2707,22 @@ background: #0f766e; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1722,6 +2798,44 @@ border-color: #e24c4c; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1764,6 +2878,66 @@ border-color: #14b8a6; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1844,6 +3018,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1907,6 +3096,74 @@ border-color: #e24c4c; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #14b8a6; @@ -2427,6 +3684,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2508,6 +3842,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2521,6 +3888,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2567,6 +4004,241 @@ color: #0f766e; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2990,6 +4662,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3062,6 +4772,59 @@ background: #f3f4f6; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3102,6 +4865,46 @@ box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #6b7280; @@ -3184,6 +4987,40 @@ color: #374151; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3256,6 +5093,117 @@ background: #f3f4f6; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #14b8a6; border-radius: 50%; @@ -3281,6 +5229,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3371,6 +5401,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3569,6 +5768,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3645,6 +5861,25 @@ padding: 1.25rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -3690,6 +5925,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3714,6 +6010,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -3769,6 +6085,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -3781,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -3805,6 +6237,76 @@ background: #e5e7eb; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -3864,6 +6366,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -3875,6 +6397,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -3923,6 +6515,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -3991,6 +6720,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -4033,6 +6832,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #4b5563; @@ -4076,6 +7028,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4096,6 +7103,50 @@ border-bottom-color: #4b5563; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4160,6 +7211,38 @@ border-color: #0f766e; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4193,6 +7276,48 @@ color: #6b7280; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4287,6 +7412,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4354,6 +7585,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f9fafb; @@ -4536,6 +7928,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4625,6 +8036,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4802,6 +8319,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4937,6 +8487,59 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4983,6 +8586,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -5024,6 +8667,55 @@ color: #14b8a6; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5121,6 +8813,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5191,6 +8903,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5299,6 +9060,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5404,6 +9238,290 @@ color: #ffffff; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5518,6 +9636,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5564,6 +9756,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5589,6 +9820,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #14b8a6; color: #ffffff; @@ -5639,10 +9903,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5678,6 +9976,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5694,6 +10010,43 @@ box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5754,6 +10107,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5770,6 +10230,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5815,6 +10301,67 @@ stroke: #cc8925; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5837,6 +10384,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -5845,6 +10424,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #14b8a6; color: #ffffff; @@ -5888,6 +10483,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #4b5563; diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index 7a2878b57..fbd3cfd7b 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -438,6 +654,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 0.1rem white; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #191919; border: 1px solid #4b4b4b; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -851,6 +1324,52 @@ border-color: #212529; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #FFE082; } @@ -893,6 +1412,14 @@ border-color: #e57373; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -911,6 +1438,101 @@ box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #191919; border: 1px solid #4b4b4b; @@ -1039,6 +1661,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1109,6 +1817,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -1122,6 +1931,30 @@ background-color: #4b4b4b; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1177,6 +2010,15 @@ border-color: #e57373; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1290,6 +2132,61 @@ padding: 0.53625rem 0.53625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #323232; color: #dedede; @@ -1373,6 +2270,112 @@ border-color: #e57373; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #191919; border: 1px solid #4b4b4b; @@ -1522,6 +2525,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -1548,6 +2578,36 @@ background: #AED581; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1636,6 +2696,22 @@ border-color: #212529; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1715,6 +2791,44 @@ border-color: #e57373; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #4b4b4b; border: 0 none; @@ -1757,6 +2871,66 @@ border-color: #FFE082; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #191919; border: 1px solid #4b4b4b; @@ -1837,6 +3011,21 @@ background-color: #4b4b4b; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1900,6 +3089,74 @@ border-color: #e57373; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #212529; background: #FFE082; @@ -2371,6 +3628,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2452,6 +3786,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2465,6 +3832,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2511,6 +3948,241 @@ color: #212529; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2934,6 +4606,44 @@ padding: 0.571rem 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -3006,6 +4716,59 @@ background: #4c4c4c; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; @@ -3046,6 +4809,46 @@ box-shadow: 0 0 0 0.1rem white; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #252525; color: #dedede; @@ -3128,6 +4931,40 @@ color: #4c4c4c; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } @@ -3200,6 +5037,117 @@ background: #4c4c4c; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3225,6 +5173,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #191919; background: #323232; @@ -3315,6 +5345,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3513,6 +5712,23 @@ padding: 0.71375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #191919; @@ -3589,6 +5805,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #191919; background: #323232; @@ -3634,6 +5869,67 @@ padding: 0.571rem 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #323232; } @@ -3658,6 +5954,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #191919; padding: 0.857rem 1rem; @@ -3713,6 +6029,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; @@ -3725,6 +6097,66 @@ box-shadow: 0 0 0 0.1rem white; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #191919; background: #323232; @@ -3749,6 +6181,76 @@ background: #4b4b4b; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 0 none; @@ -3808,6 +6310,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #191919; border: 1px solid #191919; @@ -3819,6 +6341,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #323232; color: #dedede; @@ -3867,6 +6459,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3935,6 +6664,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #323232; color: #dedede; @@ -3977,6 +6776,159 @@ border-top-color: #191919; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #323232; color: #dedede; @@ -4020,6 +6972,61 @@ padding: 0.571rem 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4c4c4c; color: #dedede; @@ -4040,6 +7047,50 @@ border-bottom-color: #4c4c4c; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #191919; padding: 0.857rem 1rem; @@ -4104,6 +7155,38 @@ border-color: #FFCA28; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #252525; border: 1px solid #191919; @@ -4137,6 +7220,48 @@ color: #dedede; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #252525; @@ -4231,6 +7356,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4298,6 +7529,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #252525; @@ -4480,6 +7872,25 @@ padding-left: 2.571rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0; background: #252525; @@ -4569,6 +7980,112 @@ margin: 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #252525; @@ -4746,6 +8263,39 @@ padding-left: 9.427rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4881,6 +8431,59 @@ margin-bottom: 2px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4927,6 +8530,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -4968,6 +8611,55 @@ color: #212529; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #252525; @@ -5065,6 +8757,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5117,6 +8829,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5201,6 +8962,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5286,6 +9120,290 @@ color: #212121; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5400,6 +9518,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5446,6 +9638,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #4b4b4b; border-radius: 3px; @@ -5471,6 +9702,39 @@ border: 2px solid #323232; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #FFE082; color: #212529; @@ -5513,10 +9777,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #4b4b4b; color: #dedede; @@ -5552,6 +9850,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5568,6 +9884,43 @@ box-shadow: 0 0 0 0.1rem white; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5628,6 +9981,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 24px; @@ -5644,6 +10104,32 @@ line-height: 24px; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5689,6 +10175,67 @@ stroke: #212121; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5711,6 +10258,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5719,6 +10298,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #FFE082; color: #212529; @@ -5754,6 +10349,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #323232; color: #dedede; diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index fd2956dc6..226acfc6d 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -438,6 +654,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 0.1rem white; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #191919; border: 1px solid #4b4b4b; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -851,6 +1324,52 @@ border-color: #212529; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #81D4FA; } @@ -893,6 +1412,14 @@ border-color: #e57373; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -911,6 +1438,101 @@ box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #191919; border: 1px solid #4b4b4b; @@ -1039,6 +1661,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1109,6 +1817,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -1122,6 +1931,30 @@ background-color: #4b4b4b; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1177,6 +2010,15 @@ border-color: #e57373; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1290,6 +2132,61 @@ padding: 0.53625rem 0.53625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #323232; color: #dedede; @@ -1373,6 +2270,112 @@ border-color: #e57373; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #191919; border: 1px solid #4b4b4b; @@ -1522,6 +2525,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -1548,6 +2578,36 @@ background: #AED581; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1636,6 +2696,22 @@ border-color: #212529; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1715,6 +2791,44 @@ border-color: #e57373; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #4b4b4b; border: 0 none; @@ -1757,6 +2871,66 @@ border-color: #81D4FA; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #191919; border: 1px solid #4b4b4b; @@ -1837,6 +3011,21 @@ background-color: #4b4b4b; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1900,6 +3089,74 @@ border-color: #e57373; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #212529; background: #81D4FA; @@ -2371,6 +3628,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2452,6 +3786,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2465,6 +3832,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2511,6 +3948,241 @@ color: #212529; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2934,6 +4606,44 @@ padding: 0.571rem 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -3006,6 +4716,59 @@ background: #4c4c4c; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; @@ -3046,6 +4809,46 @@ box-shadow: 0 0 0 0.1rem white; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #252525; color: #dedede; @@ -3128,6 +4931,40 @@ color: #4c4c4c; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } @@ -3200,6 +5037,117 @@ background: #4c4c4c; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3225,6 +5173,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #191919; background: #323232; @@ -3315,6 +5345,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3513,6 +5712,23 @@ padding: 0.71375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #191919; @@ -3589,6 +5805,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #191919; background: #323232; @@ -3634,6 +5869,67 @@ padding: 0.571rem 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #323232; } @@ -3658,6 +5954,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #191919; padding: 0.857rem 1rem; @@ -3713,6 +6029,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; @@ -3725,6 +6097,66 @@ box-shadow: 0 0 0 0.1rem white; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #191919; background: #323232; @@ -3749,6 +6181,76 @@ background: #4b4b4b; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 0 none; @@ -3808,6 +6310,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #191919; border: 1px solid #191919; @@ -3819,6 +6341,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #323232; color: #dedede; @@ -3867,6 +6459,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3935,6 +6664,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #323232; color: #dedede; @@ -3977,6 +6776,159 @@ border-top-color: #191919; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #323232; color: #dedede; @@ -4020,6 +6972,61 @@ padding: 0.571rem 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4c4c4c; color: #dedede; @@ -4040,6 +7047,50 @@ border-bottom-color: #4c4c4c; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #191919; padding: 0.857rem 1rem; @@ -4104,6 +7155,38 @@ border-color: #29B6F6; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #252525; border: 1px solid #191919; @@ -4137,6 +7220,48 @@ color: #dedede; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #252525; @@ -4231,6 +7356,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4298,6 +7529,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #252525; @@ -4480,6 +7872,25 @@ padding-left: 2.571rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0; background: #252525; @@ -4569,6 +7980,112 @@ margin: 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #252525; @@ -4746,6 +8263,39 @@ padding-left: 9.427rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4881,6 +8431,59 @@ margin-bottom: 2px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4927,6 +8530,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -4968,6 +8611,55 @@ color: #212529; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #252525; @@ -5065,6 +8757,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5117,6 +8829,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5201,6 +8962,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5286,6 +9120,290 @@ color: #212121; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5400,6 +9518,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5446,6 +9638,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #4b4b4b; border-radius: 3px; @@ -5471,6 +9702,39 @@ border: 2px solid #323232; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #81D4FA; color: #212529; @@ -5513,10 +9777,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #4b4b4b; color: #dedede; @@ -5552,6 +9850,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5568,6 +9884,43 @@ box-shadow: 0 0 0 0.1rem white; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5628,6 +9981,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 24px; @@ -5644,6 +10104,32 @@ line-height: 24px; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5689,6 +10175,67 @@ stroke: #212121; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5711,6 +10258,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5719,6 +10298,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #81D4FA; color: #212529; @@ -5754,6 +10349,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #323232; color: #dedede; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 10da4b0c7..77c3d5ef9 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -438,6 +654,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 0.1rem white; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #191919; border: 1px solid #4b4b4b; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -851,6 +1324,52 @@ border-color: #212529; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #C5E1A5; } @@ -893,6 +1412,14 @@ border-color: #e57373; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -911,6 +1438,101 @@ box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #191919; border: 1px solid #4b4b4b; @@ -1039,6 +1661,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1109,6 +1817,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -1122,6 +1931,30 @@ background-color: #4b4b4b; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1177,6 +2010,15 @@ border-color: #e57373; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1290,6 +2132,61 @@ padding: 0.53625rem 0.53625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #323232; color: #dedede; @@ -1373,6 +2270,112 @@ border-color: #e57373; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #191919; border: 1px solid #4b4b4b; @@ -1522,6 +2525,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -1548,6 +2578,36 @@ background: #AED581; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1636,6 +2696,22 @@ border-color: #212529; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1715,6 +2791,44 @@ border-color: #e57373; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #4b4b4b; border: 0 none; @@ -1757,6 +2871,66 @@ border-color: #C5E1A5; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #191919; border: 1px solid #4b4b4b; @@ -1837,6 +3011,21 @@ background-color: #4b4b4b; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1900,6 +3089,74 @@ border-color: #e57373; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #212529; background: #C5E1A5; @@ -2371,6 +3628,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2452,6 +3786,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2465,6 +3832,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2511,6 +3948,241 @@ color: #212529; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2934,6 +4606,44 @@ padding: 0.571rem 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -3006,6 +4716,59 @@ background: #4c4c4c; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; @@ -3046,6 +4809,46 @@ box-shadow: 0 0 0 0.1rem white; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #252525; color: #dedede; @@ -3128,6 +4931,40 @@ color: #4c4c4c; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } @@ -3200,6 +5037,117 @@ background: #4c4c4c; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3225,6 +5173,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #191919; background: #323232; @@ -3315,6 +5345,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3513,6 +5712,23 @@ padding: 0.71375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #191919; @@ -3589,6 +5805,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #191919; background: #323232; @@ -3634,6 +5869,67 @@ padding: 0.571rem 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #323232; } @@ -3658,6 +5954,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #191919; padding: 0.857rem 1rem; @@ -3713,6 +6029,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; @@ -3725,6 +6097,66 @@ box-shadow: 0 0 0 0.1rem white; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #191919; background: #323232; @@ -3749,6 +6181,76 @@ background: #4b4b4b; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 0 none; @@ -3808,6 +6310,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #191919; border: 1px solid #191919; @@ -3819,6 +6341,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #323232; color: #dedede; @@ -3867,6 +6459,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3935,6 +6664,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #323232; color: #dedede; @@ -3977,6 +6776,159 @@ border-top-color: #191919; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #323232; color: #dedede; @@ -4020,6 +6972,61 @@ padding: 0.571rem 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4c4c4c; color: #dedede; @@ -4040,6 +7047,50 @@ border-bottom-color: #4c4c4c; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #191919; padding: 0.857rem 1rem; @@ -4104,6 +7155,38 @@ border-color: #9CCC65; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #252525; border: 1px solid #191919; @@ -4137,6 +7220,48 @@ color: #dedede; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #252525; @@ -4231,6 +7356,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4298,6 +7529,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #252525; @@ -4480,6 +7872,25 @@ padding-left: 2.571rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0; background: #252525; @@ -4569,6 +7980,112 @@ margin: 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #252525; @@ -4746,6 +8263,39 @@ padding-left: 9.427rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4881,6 +8431,59 @@ margin-bottom: 2px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4927,6 +8530,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -4968,6 +8611,55 @@ color: #212529; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #252525; @@ -5065,6 +8757,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5117,6 +8829,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5201,6 +8962,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5286,6 +9120,290 @@ color: #212121; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5400,6 +9518,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5446,6 +9638,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #4b4b4b; border-radius: 3px; @@ -5471,6 +9702,39 @@ border: 2px solid #323232; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #C5E1A5; color: #212529; @@ -5513,10 +9777,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #4b4b4b; color: #dedede; @@ -5552,6 +9850,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5568,6 +9884,43 @@ box-shadow: 0 0 0 0.1rem white; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5628,6 +9981,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 24px; @@ -5644,6 +10104,32 @@ line-height: 24px; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5689,6 +10175,67 @@ stroke: #212121; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5711,6 +10258,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5719,6 +10298,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #C5E1A5; color: #212529; @@ -5754,6 +10349,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #323232; color: #dedede; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 94c2ea9f2..50b10af86 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -438,6 +654,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 0.1rem white; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #191919; border: 1px solid #4b4b4b; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -851,6 +1324,52 @@ border-color: #212529; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #F48FB1; } @@ -893,6 +1412,14 @@ border-color: #e57373; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -911,6 +1438,101 @@ box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #191919; border: 1px solid #4b4b4b; @@ -1039,6 +1661,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1109,6 +1817,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -1122,6 +1931,30 @@ background-color: #4b4b4b; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1177,6 +2010,15 @@ border-color: #e57373; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1290,6 +2132,61 @@ padding: 0.53625rem 0.53625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #323232; color: #dedede; @@ -1373,6 +2270,112 @@ border-color: #e57373; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #191919; border: 1px solid #4b4b4b; @@ -1522,6 +2525,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -1548,6 +2578,36 @@ background: #AED581; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1636,6 +2696,22 @@ border-color: #212529; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1715,6 +2791,44 @@ border-color: #e57373; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #4b4b4b; border: 0 none; @@ -1757,6 +2871,66 @@ border-color: #F48FB1; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #191919; border: 1px solid #4b4b4b; @@ -1837,6 +3011,21 @@ background-color: #4b4b4b; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1900,6 +3089,74 @@ border-color: #e57373; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #212529; background: #F48FB1; @@ -2371,6 +3628,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2452,6 +3786,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2465,6 +3832,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2511,6 +3948,241 @@ color: #212529; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2934,6 +4606,44 @@ padding: 0.571rem 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -3006,6 +4716,59 @@ background: #4c4c4c; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; @@ -3046,6 +4809,46 @@ box-shadow: 0 0 0 0.1rem white; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #252525; color: #dedede; @@ -3128,6 +4931,40 @@ color: #4c4c4c; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } @@ -3200,6 +5037,117 @@ background: #4c4c4c; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3225,6 +5173,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #191919; background: #323232; @@ -3315,6 +5345,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3513,6 +5712,23 @@ padding: 0.71375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #191919; @@ -3589,6 +5805,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #191919; background: #323232; @@ -3634,6 +5869,67 @@ padding: 0.571rem 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #323232; } @@ -3658,6 +5954,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #191919; padding: 0.857rem 1rem; @@ -3713,6 +6029,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; @@ -3725,6 +6097,66 @@ box-shadow: 0 0 0 0.1rem white; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #191919; background: #323232; @@ -3749,6 +6181,76 @@ background: #4b4b4b; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 0 none; @@ -3808,6 +6310,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #191919; border: 1px solid #191919; @@ -3819,6 +6341,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #323232; color: #dedede; @@ -3867,6 +6459,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3935,6 +6664,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #323232; color: #dedede; @@ -3977,6 +6776,159 @@ border-top-color: #191919; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #323232; color: #dedede; @@ -4020,6 +6972,61 @@ padding: 0.571rem 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4c4c4c; color: #dedede; @@ -4040,6 +7047,50 @@ border-bottom-color: #4c4c4c; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #191919; padding: 0.857rem 1rem; @@ -4104,6 +7155,38 @@ border-color: #EC407A; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #252525; border: 1px solid #191919; @@ -4137,6 +7220,48 @@ color: #dedede; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #252525; @@ -4231,6 +7356,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4298,6 +7529,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #252525; @@ -4480,6 +7872,25 @@ padding-left: 2.571rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0; background: #252525; @@ -4569,6 +7980,112 @@ margin: 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #252525; @@ -4746,6 +8263,39 @@ padding-left: 9.427rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4881,6 +8431,59 @@ margin-bottom: 2px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4927,6 +8530,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -4968,6 +8611,55 @@ color: #212529; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #252525; @@ -5065,6 +8757,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5117,6 +8829,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5201,6 +8962,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5286,6 +9120,290 @@ color: #212121; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5400,6 +9518,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5446,6 +9638,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #4b4b4b; border-radius: 3px; @@ -5471,6 +9702,39 @@ border: 2px solid #323232; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #F48FB1; color: #212529; @@ -5513,10 +9777,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #4b4b4b; color: #dedede; @@ -5552,6 +9850,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5568,6 +9884,43 @@ box-shadow: 0 0 0 0.1rem white; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5628,6 +9981,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 24px; @@ -5644,6 +10104,32 @@ line-height: 24px; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5689,6 +10175,67 @@ stroke: #212121; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5711,6 +10258,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5719,6 +10298,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #F48FB1; color: #212529; @@ -5754,6 +10349,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #323232; color: #dedede; diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index 23af3c50b..4b8f94daf 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -296,6 +296,126 @@ } @layer primevue { + .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; } @@ -371,6 +491,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 1rem; } @@ -463,6 +679,156 @@ font-weight: 400; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -697,6 +1063,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.3); @@ -787,6 +1243,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 18px; height: 18px; @@ -872,6 +1345,52 @@ background: #CE93D8; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(255, 255, 255, 0.6); } @@ -914,6 +1433,14 @@ border-color: #f44435; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -932,6 +1459,101 @@ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.3); @@ -1060,6 +1682,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1130,6 +1838,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -1143,6 +1952,30 @@ background-color: rgba(255, 255, 255, 0.1); } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.75rem; height: 1rem; @@ -1198,6 +2031,15 @@ border-color: #f44435; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1311,6 +2153,61 @@ padding: 1.25rem 1.25rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1394,6 +2291,112 @@ border-color: #f44435; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.3); @@ -1543,6 +2546,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -1569,6 +2599,36 @@ background: #c5e1a5; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1653,6 +2713,22 @@ background: #121212; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1728,6 +2804,44 @@ border-color: #f44435; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: rgba(255, 255, 255, 0.3); border: 0 none; @@ -1770,6 +2884,66 @@ border-color: 0 none; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.3); @@ -1850,6 +3024,21 @@ background-color: rgba(255, 255, 255, 0.1); } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1913,6 +3102,74 @@ border-color: #f44435; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #121212; background: #CE93D8; @@ -2433,6 +3690,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2514,6 +3848,39 @@ border-radius: 4px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 4px; } @@ -2527,6 +3894,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2.5rem; @@ -2573,6 +4010,241 @@ color: #CE93D8; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2996,6 +4668,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3068,6 +4778,59 @@ background: rgba(255, 255, 255, 0.04); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); @@ -3108,6 +4871,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3190,6 +4993,40 @@ color: rgba(255, 255, 255, 0.6); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3262,6 +5099,117 @@ background: rgba(255, 255, 255, 0.04); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3287,6 +5235,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3377,6 +5407,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3575,6 +5774,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.5rem; border: 0 none; @@ -3676,6 +5892,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3721,6 +5956,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3745,6 +6041,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid rgba(255, 255, 255, 0.12); padding: 1rem; @@ -3800,6 +6116,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; @@ -3812,6 +6184,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3836,6 +6268,76 @@ background: rgba(255, 255, 255, 0.12); } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -3895,6 +6397,26 @@ border-bottom-left-radius: 4px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -3906,6 +6428,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -3954,6 +6546,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4022,6 +6751,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4064,6 +6863,159 @@ border-top-color: #262626; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4107,6 +7059,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #444444; color: rgba(255, 255, 255, 0.87); @@ -4127,6 +7134,50 @@ border-bottom-color: #444444; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4191,6 +7242,38 @@ border-color: transparent; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4224,6 +7307,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #2b2b2b; @@ -4318,6 +7443,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4385,6 +7616,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 1rem; background: #1e1e1e; @@ -4567,6 +7959,25 @@ padding-left: 3rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #1e1e1e; @@ -4656,6 +8067,112 @@ margin: 0.5rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 1rem; background: #1e1e1e; @@ -4833,6 +8350,39 @@ padding-left: 11rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4992,6 +8542,59 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5038,6 +8641,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -5079,6 +8722,55 @@ color: #CE93D8; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5176,6 +8868,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 1rem 1rem; margin: 0; @@ -5246,6 +8958,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5354,6 +9115,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5459,6 +9293,290 @@ color: #121212; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5573,6 +9691,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5619,6 +9811,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: rgba(255, 255, 255, 0.12); border-radius: 4px; @@ -5644,6 +9875,39 @@ border: 2px solid #1e1e1e; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #CE93D8; color: #121212; @@ -5694,10 +9958,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 4px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); @@ -5733,6 +10031,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -5749,6 +10065,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5809,6 +10162,113 @@ border-bottom-right-radius: 4px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 4px; @@ -5825,6 +10285,32 @@ line-height: 4px; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5870,6 +10356,67 @@ stroke: #7f6003; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5892,6 +10439,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -5900,6 +10479,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #CE93D8; color: #121212; @@ -5943,6 +10538,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index 46c3d82ed..ffee7aec2 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -296,6 +296,126 @@ } @layer primevue { + .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; } @@ -371,6 +491,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 1rem; } @@ -463,6 +679,156 @@ font-weight: 400; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -697,6 +1063,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.3); @@ -787,6 +1243,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 18px; height: 18px; @@ -872,6 +1345,52 @@ background: #9FA8DA; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(255, 255, 255, 0.6); } @@ -914,6 +1433,14 @@ border-color: #f44435; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -932,6 +1459,101 @@ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.3); @@ -1060,6 +1682,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1130,6 +1838,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -1143,6 +1952,30 @@ background-color: rgba(255, 255, 255, 0.1); } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.75rem; height: 1rem; @@ -1198,6 +2031,15 @@ border-color: #f44435; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1311,6 +2153,61 @@ padding: 1.25rem 1.25rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1394,6 +2291,112 @@ border-color: #f44435; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.3); @@ -1543,6 +2546,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -1569,6 +2599,36 @@ background: #c5e1a5; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1653,6 +2713,22 @@ background: #121212; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1728,6 +2804,44 @@ border-color: #f44435; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: rgba(255, 255, 255, 0.3); border: 0 none; @@ -1770,6 +2884,66 @@ border-color: 0 none; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.3); @@ -1850,6 +3024,21 @@ background-color: rgba(255, 255, 255, 0.1); } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1913,6 +3102,74 @@ border-color: #f44435; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #121212; background: #9FA8DA; @@ -2433,6 +3690,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2514,6 +3848,39 @@ border-radius: 4px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 4px; } @@ -2527,6 +3894,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2.5rem; @@ -2573,6 +4010,241 @@ color: #9FA8DA; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2996,6 +4668,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3068,6 +4778,59 @@ background: rgba(255, 255, 255, 0.04); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); @@ -3108,6 +4871,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3190,6 +4993,40 @@ color: rgba(255, 255, 255, 0.6); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3262,6 +5099,117 @@ background: rgba(255, 255, 255, 0.04); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3287,6 +5235,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3377,6 +5407,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3575,6 +5774,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.5rem; border: 0 none; @@ -3676,6 +5892,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3721,6 +5956,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3745,6 +6041,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid rgba(255, 255, 255, 0.12); padding: 1rem; @@ -3800,6 +6116,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; @@ -3812,6 +6184,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3836,6 +6268,76 @@ background: rgba(255, 255, 255, 0.12); } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -3895,6 +6397,26 @@ border-bottom-left-radius: 4px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -3906,6 +6428,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -3954,6 +6546,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4022,6 +6751,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4064,6 +6863,159 @@ border-top-color: #262626; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4107,6 +7059,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #444444; color: rgba(255, 255, 255, 0.87); @@ -4127,6 +7134,50 @@ border-bottom-color: #444444; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4191,6 +7242,38 @@ border-color: transparent; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4224,6 +7307,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #2b2b2b; @@ -4318,6 +7443,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4385,6 +7616,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 1rem; background: #1e1e1e; @@ -4567,6 +7959,25 @@ padding-left: 3rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #1e1e1e; @@ -4656,6 +8067,112 @@ margin: 0.5rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 1rem; background: #1e1e1e; @@ -4833,6 +8350,39 @@ padding-left: 11rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4992,6 +8542,59 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5038,6 +8641,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -5079,6 +8722,55 @@ color: #9FA8DA; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5176,6 +8868,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 1rem 1rem; margin: 0; @@ -5246,6 +8958,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5354,6 +9115,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5459,6 +9293,290 @@ color: #121212; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5573,6 +9691,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5619,6 +9811,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: rgba(255, 255, 255, 0.12); border-radius: 4px; @@ -5644,6 +9875,39 @@ border: 2px solid #1e1e1e; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #9FA8DA; color: #121212; @@ -5694,10 +9958,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 4px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); @@ -5733,6 +10031,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -5749,6 +10065,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5809,6 +10162,113 @@ border-bottom-right-radius: 4px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 4px; @@ -5825,6 +10285,32 @@ line-height: 4px; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5870,6 +10356,67 @@ stroke: #7f6003; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5892,6 +10439,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -5900,6 +10479,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #9FA8DA; color: #121212; @@ -5943,6 +10538,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index 85a835818..07cf8b611 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -295,6 +295,126 @@ } @layer primevue { + .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; } @@ -370,6 +490,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 1rem; } @@ -462,6 +678,156 @@ font-weight: 400; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #B00020; } @@ -696,6 +1062,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -786,6 +1242,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 18px; height: 18px; @@ -871,6 +1344,52 @@ background: #673AB7; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(0, 0, 0, 0.87); } @@ -913,6 +1432,14 @@ border-color: #B00020; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -931,6 +1458,101 @@ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1059,6 +1681,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1129,6 +1837,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #B00020; } @@ -1142,6 +1951,30 @@ background-color: #dcdcdc; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.75rem; height: 1rem; @@ -1197,6 +2030,15 @@ border-color: #B00020; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1310,6 +2152,61 @@ padding: 1.25rem 1.25rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1393,6 +2290,112 @@ border-color: #B00020; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1542,6 +2545,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #B00020; } @@ -1568,6 +2598,36 @@ background: #689F38; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1652,6 +2712,22 @@ background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1727,6 +2803,44 @@ border-color: #B00020; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #c1c1c1; border: 0 none; @@ -1769,6 +2883,66 @@ border-color: 0 none; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1849,6 +3023,21 @@ background-color: #dcdcdc; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1912,6 +3101,74 @@ border-color: #B00020; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #673AB7; @@ -2432,6 +3689,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2513,6 +3847,39 @@ border-radius: 4px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 4px; } @@ -2526,6 +3893,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2.5rem; @@ -2572,6 +4009,241 @@ color: #673AB7; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2995,6 +4667,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3067,6 +4777,59 @@ background: rgba(0, 0, 0, 0.04); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); @@ -3107,6 +4870,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3189,6 +4992,40 @@ color: rgba(0, 0, 0, 0.6); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3261,6 +5098,117 @@ background: rgba(0, 0, 0, 0.04); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3286,6 +5234,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e0e0e0; background: #ffffff; @@ -3376,6 +5406,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3574,6 +5773,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.5rem; border: 0 none; @@ -3675,6 +5891,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e0e0e0; background: #ffffff; @@ -3720,6 +5955,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3744,6 +6040,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e0e0e0; padding: 1rem; @@ -3799,6 +6115,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; @@ -3811,6 +6183,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e0e0e0; background: #ffffff; @@ -3835,6 +6267,76 @@ background: rgba(0, 0, 0, 0.12); } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -3894,6 +6396,26 @@ border-bottom-left-radius: 4px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #ffffff; border: 1px solid #e0e0e0; @@ -3905,6 +6427,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3953,6 +6545,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4021,6 +6750,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4063,6 +6862,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4106,6 +7058,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); color: #ffffff; @@ -4126,6 +7133,50 @@ border-bottom-color: rgba(97, 97, 97, 0.9); } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1rem; @@ -4190,6 +7241,38 @@ border-color: transparent; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e5e5; @@ -4223,6 +7306,48 @@ color: rgba(0, 0, 0, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4317,6 +7442,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4384,6 +7615,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 1rem; background: transparent; @@ -4566,6 +7958,25 @@ padding-left: 3rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4655,6 +8066,112 @@ margin: 0.5rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 1rem; background: transparent; @@ -4832,6 +8349,39 @@ padding-left: 11rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4991,6 +8541,59 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5037,6 +8640,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -5078,6 +8721,55 @@ color: #673AB7; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5175,6 +8867,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 1rem 1rem; margin: 0; @@ -5245,6 +8957,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5353,6 +9114,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5458,6 +9292,290 @@ color: #ffffff; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5572,6 +9690,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5618,6 +9810,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: rgba(0, 0, 0, 0.12); border-radius: 4px; @@ -5643,6 +9874,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #673AB7; color: #ffffff; @@ -5693,10 +9957,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 4px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); @@ -5732,6 +10030,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -5748,6 +10064,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5808,6 +10161,113 @@ border-bottom-right-radius: 4px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 4px; @@ -5824,6 +10284,32 @@ line-height: 4px; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5869,6 +10355,67 @@ stroke: #7f6003; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5891,6 +10438,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(0, 0, 0, 0.08); border-radius: 4px; @@ -5899,6 +10478,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #673AB7; color: #ffffff; @@ -5942,6 +10537,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: rgba(0, 0, 0, 0.87); diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index e0d2becd9..93c18fcee 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -295,6 +295,126 @@ } @layer primevue { + .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; } @@ -370,6 +490,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 1rem; } @@ -462,6 +678,156 @@ font-weight: 400; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #B00020; } @@ -696,6 +1062,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -786,6 +1242,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 18px; height: 18px; @@ -871,6 +1344,52 @@ background: #3F51B5; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(0, 0, 0, 0.87); } @@ -913,6 +1432,14 @@ border-color: #B00020; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -931,6 +1458,101 @@ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1059,6 +1681,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1129,6 +1837,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #B00020; } @@ -1142,6 +1951,30 @@ background-color: #dcdcdc; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.75rem; height: 1rem; @@ -1197,6 +2030,15 @@ border-color: #B00020; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1310,6 +2152,61 @@ padding: 1.25rem 1.25rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1393,6 +2290,112 @@ border-color: #B00020; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1542,6 +2545,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #B00020; } @@ -1568,6 +2598,36 @@ background: #689F38; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1652,6 +2712,22 @@ background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1727,6 +2803,44 @@ border-color: #B00020; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #c1c1c1; border: 0 none; @@ -1769,6 +2883,66 @@ border-color: 0 none; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1849,6 +3023,21 @@ background-color: #dcdcdc; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1912,6 +3101,74 @@ border-color: #B00020; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #3F51B5; @@ -2432,6 +3689,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2513,6 +3847,39 @@ border-radius: 4px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 4px; } @@ -2526,6 +3893,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2.5rem; @@ -2572,6 +4009,241 @@ color: #3F51B5; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2995,6 +4667,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3067,6 +4777,59 @@ background: rgba(0, 0, 0, 0.04); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); @@ -3107,6 +4870,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3189,6 +4992,40 @@ color: rgba(0, 0, 0, 0.6); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3261,6 +5098,117 @@ background: rgba(0, 0, 0, 0.04); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3286,6 +5234,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e0e0e0; background: #ffffff; @@ -3376,6 +5406,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3574,6 +5773,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.5rem; border: 0 none; @@ -3675,6 +5891,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e0e0e0; background: #ffffff; @@ -3720,6 +5955,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3744,6 +6040,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e0e0e0; padding: 1rem; @@ -3799,6 +6115,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; @@ -3811,6 +6183,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e0e0e0; background: #ffffff; @@ -3835,6 +6267,76 @@ background: rgba(0, 0, 0, 0.12); } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -3894,6 +6396,26 @@ border-bottom-left-radius: 4px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #ffffff; border: 1px solid #e0e0e0; @@ -3905,6 +6427,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3953,6 +6545,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4021,6 +6750,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4063,6 +6862,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4106,6 +7058,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); color: #ffffff; @@ -4126,6 +7133,50 @@ border-bottom-color: rgba(97, 97, 97, 0.9); } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1rem; @@ -4190,6 +7241,38 @@ border-color: transparent; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e5e5; @@ -4223,6 +7306,48 @@ color: rgba(0, 0, 0, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4317,6 +7442,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4384,6 +7615,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 1rem; background: transparent; @@ -4566,6 +7958,25 @@ padding-left: 3rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4655,6 +8066,112 @@ margin: 0.5rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 1rem; background: transparent; @@ -4832,6 +8349,39 @@ padding-left: 11rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4991,6 +8541,59 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5037,6 +8640,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -5078,6 +8721,55 @@ color: #3F51B5; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5175,6 +8867,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 1rem 1rem; margin: 0; @@ -5245,6 +8957,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5353,6 +9114,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5458,6 +9292,290 @@ color: #ffffff; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5572,6 +9690,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5618,6 +9810,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: rgba(0, 0, 0, 0.12); border-radius: 4px; @@ -5643,6 +9874,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #3F51B5; color: #ffffff; @@ -5693,10 +9957,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 4px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); @@ -5732,6 +10030,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -5748,6 +10064,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5808,6 +10161,113 @@ border-bottom-right-radius: 4px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 4px; @@ -5824,6 +10284,32 @@ line-height: 4px; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5869,6 +10355,67 @@ stroke: #7f6003; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5891,6 +10438,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(0, 0, 0, 0.08); border-radius: 4px; @@ -5899,6 +10478,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #3F51B5; color: #ffffff; @@ -5942,6 +10537,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: rgba(0, 0, 0, 0.87); diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index cb6bcbfc0..0db21832b 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -296,6 +296,126 @@ } @layer primevue { + .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; } @@ -371,6 +491,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -463,6 +679,156 @@ font-weight: 400; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -697,6 +1063,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.3); @@ -787,6 +1243,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 18px; height: 18px; @@ -872,6 +1345,52 @@ background: #CE93D8; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(255, 255, 255, 0.6); } @@ -914,6 +1433,14 @@ border-color: #f44435; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -932,6 +1459,101 @@ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.3); @@ -1060,6 +1682,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1130,6 +1838,107 @@ width: 2.25rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -1143,6 +1952,30 @@ background-color: rgba(255, 255, 255, 0.1); } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.75rem; height: 1rem; @@ -1198,6 +2031,15 @@ border-color: #f44435; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1311,6 +2153,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1394,6 +2291,112 @@ border-color: #f44435; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.3); @@ -1543,6 +2546,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -1569,6 +2599,36 @@ background: #c5e1a5; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1653,6 +2713,22 @@ background: #121212; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1728,6 +2804,44 @@ border-color: #f44435; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: rgba(255, 255, 255, 0.3); border: 0 none; @@ -1770,6 +2884,66 @@ border-color: 0 none; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.3); @@ -1850,6 +3024,21 @@ background-color: rgba(255, 255, 255, 0.1); } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1913,6 +3102,74 @@ border-color: #f44435; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #121212; background: #CE93D8; @@ -2433,6 +3690,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2514,6 +3848,39 @@ border-radius: 4px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 4px; } @@ -2527,6 +3894,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2573,6 +4010,241 @@ color: #CE93D8; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2996,6 +4668,44 @@ padding: 0.75rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0.75rem; } @@ -3068,6 +4778,59 @@ background: rgba(255, 255, 255, 0.04); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); @@ -3108,6 +4871,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3190,6 +4993,40 @@ color: rgba(255, 255, 255, 0.6); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.75rem; } @@ -3262,6 +5099,117 @@ background: rgba(255, 255, 255, 0.04); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3287,6 +5235,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3377,6 +5407,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3575,6 +5774,23 @@ padding: 0.9375rem 0.9375rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 0 none; @@ -3676,6 +5892,25 @@ padding: 0.75rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3721,6 +5956,67 @@ padding: 0.75rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3745,6 +6041,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.75rem; @@ -3800,6 +6116,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; @@ -3812,6 +6184,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3836,6 +6268,76 @@ background: rgba(255, 255, 255, 0.12); } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -3895,6 +6397,26 @@ border-bottom-left-radius: 4px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -3906,6 +6428,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -3954,6 +6546,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4022,6 +6751,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4064,6 +6863,159 @@ border-top-color: #262626; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4107,6 +7059,61 @@ padding: 0.75rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #444444; color: rgba(255, 255, 255, 0.87); @@ -4127,6 +7134,50 @@ border-bottom-color: #444444; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 0.75rem; @@ -4191,6 +7242,38 @@ border-color: transparent; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4224,6 +7307,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #2b2b2b; @@ -4318,6 +7443,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4385,6 +7616,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.75rem; background: #1e1e1e; @@ -4567,6 +7959,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #1e1e1e; @@ -4656,6 +8067,112 @@ margin: 0.5rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.75rem; background: #1e1e1e; @@ -4833,6 +8350,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4992,6 +8542,59 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5038,6 +8641,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -5079,6 +8722,55 @@ color: #CE93D8; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5176,6 +8868,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5246,6 +8958,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 0.75rem 0; border-radius: 4px; @@ -5354,6 +9115,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5459,6 +9293,290 @@ color: #121212; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5573,6 +9691,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5619,6 +9811,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: rgba(255, 255, 255, 0.12); border-radius: 4px; @@ -5644,6 +9875,39 @@ border: 2px solid #1e1e1e; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #CE93D8; color: #121212; @@ -5694,10 +9958,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 4px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); @@ -5733,6 +10031,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -5749,6 +10065,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5809,6 +10162,113 @@ border-bottom-right-radius: 4px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 4px; @@ -5825,6 +10285,32 @@ line-height: 4px; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5870,6 +10356,67 @@ stroke: #7f6003; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 2.75rem; height: 2.75rem; @@ -5892,6 +10439,38 @@ height: 1.15rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -5900,6 +10479,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #CE93D8; color: #121212; @@ -5943,6 +10538,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index 94ce1ac20..75975d5c7 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -296,6 +296,126 @@ } @layer primevue { + .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; } @@ -371,6 +491,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -463,6 +679,156 @@ font-weight: 400; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -697,6 +1063,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.3); @@ -787,6 +1243,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 18px; height: 18px; @@ -872,6 +1345,52 @@ background: #9FA8DA; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(255, 255, 255, 0.6); } @@ -914,6 +1433,14 @@ border-color: #f44435; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -932,6 +1459,101 @@ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.3); @@ -1060,6 +1682,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1130,6 +1838,107 @@ width: 2.25rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -1143,6 +1952,30 @@ background-color: rgba(255, 255, 255, 0.1); } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.75rem; height: 1rem; @@ -1198,6 +2031,15 @@ border-color: #f44435; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1311,6 +2153,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1394,6 +2291,112 @@ border-color: #f44435; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.3); @@ -1543,6 +2546,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -1569,6 +2599,36 @@ background: #c5e1a5; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1653,6 +2713,22 @@ background: #121212; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1728,6 +2804,44 @@ border-color: #f44435; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: rgba(255, 255, 255, 0.3); border: 0 none; @@ -1770,6 +2884,66 @@ border-color: 0 none; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.3); @@ -1850,6 +3024,21 @@ background-color: rgba(255, 255, 255, 0.1); } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1913,6 +3102,74 @@ border-color: #f44435; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #121212; background: #9FA8DA; @@ -2433,6 +3690,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2514,6 +3848,39 @@ border-radius: 4px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 4px; } @@ -2527,6 +3894,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2573,6 +4010,241 @@ color: #9FA8DA; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2996,6 +4668,44 @@ padding: 0.75rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0.75rem; } @@ -3068,6 +4778,59 @@ background: rgba(255, 255, 255, 0.04); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); @@ -3108,6 +4871,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3190,6 +4993,40 @@ color: rgba(255, 255, 255, 0.6); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.75rem; } @@ -3262,6 +5099,117 @@ background: rgba(255, 255, 255, 0.04); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3287,6 +5235,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3377,6 +5407,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3575,6 +5774,23 @@ padding: 0.9375rem 0.9375rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 0 none; @@ -3676,6 +5892,25 @@ padding: 0.75rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3721,6 +5956,67 @@ padding: 0.75rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3745,6 +6041,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.75rem; @@ -3800,6 +6116,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; @@ -3812,6 +6184,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3836,6 +6268,76 @@ background: rgba(255, 255, 255, 0.12); } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -3895,6 +6397,26 @@ border-bottom-left-radius: 4px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -3906,6 +6428,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -3954,6 +6546,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4022,6 +6751,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4064,6 +6863,159 @@ border-top-color: #262626; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4107,6 +7059,61 @@ padding: 0.75rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #444444; color: rgba(255, 255, 255, 0.87); @@ -4127,6 +7134,50 @@ border-bottom-color: #444444; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 0.75rem; @@ -4191,6 +7242,38 @@ border-color: transparent; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4224,6 +7307,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #2b2b2b; @@ -4318,6 +7443,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4385,6 +7616,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.75rem; background: #1e1e1e; @@ -4567,6 +7959,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #1e1e1e; @@ -4656,6 +8067,112 @@ margin: 0.5rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.75rem; background: #1e1e1e; @@ -4833,6 +8350,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4992,6 +8542,59 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5038,6 +8641,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -5079,6 +8722,55 @@ color: #9FA8DA; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5176,6 +8868,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5246,6 +8958,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 0.75rem 0; border-radius: 4px; @@ -5354,6 +9115,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5459,6 +9293,290 @@ color: #121212; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5573,6 +9691,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5619,6 +9811,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: rgba(255, 255, 255, 0.12); border-radius: 4px; @@ -5644,6 +9875,39 @@ border: 2px solid #1e1e1e; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #9FA8DA; color: #121212; @@ -5694,10 +9958,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 4px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); @@ -5733,6 +10031,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -5749,6 +10065,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5809,6 +10162,113 @@ border-bottom-right-radius: 4px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 4px; @@ -5825,6 +10285,32 @@ line-height: 4px; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5870,6 +10356,67 @@ stroke: #7f6003; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 2.75rem; height: 2.75rem; @@ -5892,6 +10439,38 @@ height: 1.15rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -5900,6 +10479,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #9FA8DA; color: #121212; @@ -5943,6 +10538,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index 9b9817a54..133e6a27b 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -295,6 +295,126 @@ } @layer primevue { + .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; } @@ -370,6 +490,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -462,6 +678,156 @@ font-weight: 400; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #B00020; } @@ -696,6 +1062,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -786,6 +1242,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 18px; height: 18px; @@ -871,6 +1344,52 @@ background: #673AB7; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(0, 0, 0, 0.87); } @@ -913,6 +1432,14 @@ border-color: #B00020; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -931,6 +1458,101 @@ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1059,6 +1681,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1129,6 +1837,107 @@ width: 2.25rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #B00020; } @@ -1142,6 +1951,30 @@ background-color: #dcdcdc; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.75rem; height: 1rem; @@ -1197,6 +2030,15 @@ border-color: #B00020; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1310,6 +2152,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1393,6 +2290,112 @@ border-color: #B00020; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1542,6 +2545,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #B00020; } @@ -1568,6 +2598,36 @@ background: #689F38; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1652,6 +2712,22 @@ background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1727,6 +2803,44 @@ border-color: #B00020; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #c1c1c1; border: 0 none; @@ -1769,6 +2883,66 @@ border-color: 0 none; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1849,6 +3023,21 @@ background-color: #dcdcdc; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1912,6 +3101,74 @@ border-color: #B00020; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #673AB7; @@ -2432,6 +3689,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2513,6 +3847,39 @@ border-radius: 4px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 4px; } @@ -2526,6 +3893,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2572,6 +4009,241 @@ color: #673AB7; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2995,6 +4667,44 @@ padding: 0.75rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0.75rem; } @@ -3067,6 +4777,59 @@ background: rgba(0, 0, 0, 0.04); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); @@ -3107,6 +4870,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3189,6 +4992,40 @@ color: rgba(0, 0, 0, 0.6); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.75rem; } @@ -3261,6 +5098,117 @@ background: rgba(0, 0, 0, 0.04); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3286,6 +5234,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e0e0e0; background: #ffffff; @@ -3376,6 +5406,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3574,6 +5773,23 @@ padding: 0.9375rem 0.9375rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 0 none; @@ -3675,6 +5891,25 @@ padding: 0.75rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e0e0e0; background: #ffffff; @@ -3720,6 +5955,67 @@ padding: 0.75rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3744,6 +6040,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e0e0e0; padding: 0.75rem; @@ -3799,6 +6115,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; @@ -3811,6 +6183,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e0e0e0; background: #ffffff; @@ -3835,6 +6267,76 @@ background: rgba(0, 0, 0, 0.12); } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -3894,6 +6396,26 @@ border-bottom-left-radius: 4px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #ffffff; border: 1px solid #e0e0e0; @@ -3905,6 +6427,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3953,6 +6545,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4021,6 +6750,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4063,6 +6862,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4106,6 +7058,61 @@ padding: 0.75rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); color: #ffffff; @@ -4126,6 +7133,50 @@ border-bottom-color: rgba(97, 97, 97, 0.9); } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 0.75rem; @@ -4190,6 +7241,38 @@ border-color: transparent; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e5e5; @@ -4223,6 +7306,48 @@ color: rgba(0, 0, 0, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4317,6 +7442,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4384,6 +7615,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.75rem; background: transparent; @@ -4566,6 +7958,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4655,6 +8066,112 @@ margin: 0.5rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.75rem; background: transparent; @@ -4832,6 +8349,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4991,6 +8541,59 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5037,6 +8640,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -5078,6 +8721,55 @@ color: #673AB7; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5175,6 +8867,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5245,6 +8957,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 0.75rem 0; border-radius: 4px; @@ -5353,6 +9114,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5458,6 +9292,290 @@ color: #ffffff; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5572,6 +9690,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5618,6 +9810,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: rgba(0, 0, 0, 0.12); border-radius: 4px; @@ -5643,6 +9874,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #673AB7; color: #ffffff; @@ -5693,10 +9957,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 4px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); @@ -5732,6 +10030,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -5748,6 +10064,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5808,6 +10161,113 @@ border-bottom-right-radius: 4px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 4px; @@ -5824,6 +10284,32 @@ line-height: 4px; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5869,6 +10355,67 @@ stroke: #7f6003; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 2.75rem; height: 2.75rem; @@ -5891,6 +10438,38 @@ height: 1.15rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(0, 0, 0, 0.08); border-radius: 4px; @@ -5899,6 +10478,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #673AB7; color: #ffffff; @@ -5942,6 +10537,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: rgba(0, 0, 0, 0.87); diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index 3f4ab4c7f..7f8f4d99b 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -295,6 +295,126 @@ } @layer primevue { + .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; } @@ -370,6 +490,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -462,6 +678,156 @@ font-weight: 400; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #B00020; } @@ -696,6 +1062,96 @@ box-shadow: none; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -786,6 +1242,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 18px; height: 18px; @@ -871,6 +1344,52 @@ background: #3F51B5; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(0, 0, 0, 0.87); } @@ -913,6 +1432,14 @@ border-color: #B00020; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -931,6 +1458,101 @@ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1059,6 +1681,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1129,6 +1837,107 @@ width: 2.25rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #B00020; } @@ -1142,6 +1951,30 @@ background-color: #dcdcdc; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2.75rem; height: 1rem; @@ -1197,6 +2030,15 @@ border-color: #B00020; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1310,6 +2152,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1393,6 +2290,112 @@ border-color: #B00020; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1542,6 +2545,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #B00020; } @@ -1568,6 +2598,36 @@ background: #689F38; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1652,6 +2712,22 @@ background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1727,6 +2803,44 @@ border-color: #B00020; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #c1c1c1; border: 0 none; @@ -1769,6 +2883,66 @@ border-color: 0 none; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1849,6 +3023,21 @@ background-color: #dcdcdc; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1912,6 +3101,74 @@ border-color: #B00020; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #3F51B5; @@ -2432,6 +3689,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2513,6 +3847,39 @@ border-radius: 4px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 4px; } @@ -2526,6 +3893,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2572,6 +4009,241 @@ color: #3F51B5; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2995,6 +4667,44 @@ padding: 0.75rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0.75rem; } @@ -3067,6 +4777,59 @@ background: rgba(0, 0, 0, 0.04); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); @@ -3107,6 +4870,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3189,6 +4992,40 @@ color: rgba(0, 0, 0, 0.6); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.75rem; } @@ -3261,6 +5098,117 @@ background: rgba(0, 0, 0, 0.04); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3286,6 +5234,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e0e0e0; background: #ffffff; @@ -3376,6 +5406,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3574,6 +5773,23 @@ padding: 0.9375rem 0.9375rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 0 none; @@ -3675,6 +5891,25 @@ padding: 0.75rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e0e0e0; background: #ffffff; @@ -3720,6 +5955,67 @@ padding: 0.75rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3744,6 +6040,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e0e0e0; padding: 0.75rem; @@ -3799,6 +6115,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; @@ -3811,6 +6183,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e0e0e0; background: #ffffff; @@ -3835,6 +6267,76 @@ background: rgba(0, 0, 0, 0.12); } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -3894,6 +6396,26 @@ border-bottom-left-radius: 4px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #ffffff; border: 1px solid #e0e0e0; @@ -3905,6 +6427,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3953,6 +6545,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4021,6 +6750,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4063,6 +6862,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4106,6 +7058,61 @@ padding: 0.75rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); color: #ffffff; @@ -4126,6 +7133,50 @@ border-bottom-color: rgba(97, 97, 97, 0.9); } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 0.75rem; @@ -4190,6 +7241,38 @@ border-color: transparent; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e5e5; @@ -4223,6 +7306,48 @@ color: rgba(0, 0, 0, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4317,6 +7442,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4384,6 +7615,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.75rem; background: transparent; @@ -4566,6 +7958,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4655,6 +8066,112 @@ margin: 0.5rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.75rem; background: transparent; @@ -4832,6 +8349,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4991,6 +8541,59 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5037,6 +8640,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -5078,6 +8721,55 @@ color: #3F51B5; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5175,6 +8867,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5245,6 +8957,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 0.75rem 0; border-radius: 4px; @@ -5353,6 +9114,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5458,6 +9292,290 @@ color: #ffffff; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5572,6 +9690,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5618,6 +9810,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: rgba(0, 0, 0, 0.12); border-radius: 4px; @@ -5643,6 +9874,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #3F51B5; color: #ffffff; @@ -5693,10 +9957,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 4px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); @@ -5732,6 +10030,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -5748,6 +10064,43 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5808,6 +10161,113 @@ border-bottom-right-radius: 4px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 4px; @@ -5824,6 +10284,32 @@ line-height: 4px; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5869,6 +10355,67 @@ stroke: #7f6003; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 2.75rem; height: 2.75rem; @@ -5891,6 +10438,38 @@ height: 1.15rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(0, 0, 0, 0.08); border-radius: 4px; @@ -5899,6 +10478,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #3F51B5; color: #ffffff; @@ -5942,6 +10537,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: rgba(0, 0, 0, 0.87); diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css index a3f825226..c555a37bf 100644 --- a/public/themes/mira/theme.css +++ b/public/themes/mira/theme.css @@ -299,6 +299,126 @@ } @layer primevue { + .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; } @@ -374,6 +494,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -466,6 +682,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #BF616A; } @@ -700,6 +1066,96 @@ box-shadow: 0 0 0 0.2rem #C0D0E0; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #D8DEE9; @@ -790,6 +1246,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -875,6 +1348,52 @@ background: #81A1C1; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #81A1C1; } @@ -917,6 +1436,14 @@ border-color: #BF616A; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -935,6 +1462,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #D8DEE9; @@ -1063,6 +1685,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #ffffff; color: #81A1C1; @@ -1133,6 +1841,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #BF616A; } @@ -1146,6 +1955,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1201,6 +2034,15 @@ border-color: #BF616A; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1314,6 +2156,61 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #4C566A; @@ -1397,6 +2294,112 @@ border-color: #BF616A; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #D8DEE9; @@ -1546,6 +2549,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #BF616A; } @@ -1572,6 +2602,36 @@ background: #7FA366; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1656,6 +2716,22 @@ background: #81A1C1; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1731,6 +2807,44 @@ border-color: #BF616A; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #E5E9F0; border: 0 none; @@ -1773,6 +2887,66 @@ border-color: #5E81AC; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #D8DEE9; @@ -1853,6 +3027,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1916,6 +3105,74 @@ border-color: #BF616A; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #5E81AC; @@ -2387,6 +3644,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2468,6 +3802,39 @@ border-radius: 4px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 4px; } @@ -2481,6 +3848,76 @@ box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.2), 0 12px 10px 0 rgba(0, 0, 0, 0.06); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2527,6 +3964,241 @@ color: #2E3440; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2950,6 +4622,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3022,6 +4732,59 @@ background: transparent; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: transparent; color: #4C566A; @@ -3062,6 +4825,46 @@ box-shadow: 0 0 0 0.2rem #C0D0E0; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #4C566A; @@ -3144,6 +4947,40 @@ color: #4C566A; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3216,6 +5053,117 @@ background: transparent; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3241,6 +5189,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #E5E9F0; background: #ffffff; @@ -3331,6 +5361,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3529,6 +5728,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #E5E9F0; @@ -3630,6 +5846,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #E5E9F0; background: #ffffff; @@ -3675,6 +5910,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3699,6 +5995,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #E5E9F0; padding: 1rem; @@ -3754,6 +6070,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #ECEFF4; border: 0 none; @@ -3766,6 +6138,66 @@ box-shadow: 0 0 0 0.2rem #C0D0E0; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #E5E9F0; background: #ffffff; @@ -3790,6 +6222,76 @@ background: #c2c7d1; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 2px solid #E5E9F0; @@ -3849,6 +6351,26 @@ border-bottom-left-radius: 4px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #ffffff; border: 1px solid #E5E9F0; @@ -3860,6 +6382,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #4C566A; @@ -3908,6 +6500,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 4px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3976,6 +6705,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #4C566A; @@ -4018,6 +6817,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #4C566A; @@ -4061,6 +7013,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4C566A; color: #ffffff; @@ -4081,6 +7088,50 @@ border-bottom-color: #4C566A; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1rem; @@ -4145,6 +7196,38 @@ border-color: #48678c; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #E5E9F0; @@ -4178,6 +7261,48 @@ color: #81A1C1; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4272,6 +7397,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4339,6 +7570,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #ECEFF4; @@ -4521,6 +7913,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4610,6 +8021,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #ECEFF4; @@ -4787,6 +8304,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4946,6 +8496,59 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -4992,6 +8595,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 2px solid #E5E9F0; @@ -5033,6 +8676,55 @@ color: #4C566A; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5130,6 +8822,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5182,6 +8894,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5266,6 +9027,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5351,6 +9185,290 @@ color: #331518; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5465,6 +9583,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5511,6 +9703,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #E5E9F0; border-radius: 4px; @@ -5536,6 +9767,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #5E81AC; color: #ffffff; @@ -5578,10 +9842,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 4px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #E5E9F0; color: #4C566A; @@ -5617,6 +9915,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 4px; @@ -5633,6 +9949,43 @@ box-shadow: 0 0 0 0.2rem #C0D0E0; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5693,6 +10046,113 @@ border-bottom-right-radius: 4px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5709,6 +10169,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5754,6 +10240,67 @@ stroke: #3c1d14; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5776,6 +10323,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #E5E9F0; border-radius: 4px; @@ -5784,6 +10363,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #5E81AC; color: #ffffff; @@ -5819,6 +10414,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #4C566A; diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css index f86be4c35..2a49ebee8 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.25rem; } @@ -438,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #d8222f; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #a5acb3; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 14px; height: 14px; @@ -847,6 +1320,52 @@ background: #0e5d9a; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #1174c0; } @@ -889,6 +1408,14 @@ border-color: #d8222f; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -907,6 +1434,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #a5acb3; @@ -1035,6 +1657,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #dde1e6; color: #697077; @@ -1105,6 +1813,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #d8222f; } @@ -1118,6 +1927,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 2rem; height: 1.155rem; @@ -1173,6 +2006,15 @@ border-color: #d8222f; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1286,6 +2128,61 @@ padding: 0.3125rem 0.3125rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #343a3f; @@ -1369,6 +2266,112 @@ border-color: #d8222f; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #a5acb3; @@ -1518,6 +2521,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #d8222f; } @@ -1544,6 +2574,36 @@ background: #207f3b; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 14px; height: 14px; @@ -1628,6 +2688,22 @@ background: #0e5d9a; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1703,6 +2779,44 @@ border-color: #d8222f; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #dee2e6; border: 0 none; @@ -1745,6 +2859,66 @@ border-color: #1174c0; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #a5acb3; @@ -1825,6 +2999,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1888,6 +3077,74 @@ border-color: #d8222f; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #1174c0; @@ -2359,6 +3616,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.75rem; height: 2.75rem; @@ -2440,6 +3774,39 @@ border-radius: 1px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 1px; } @@ -2453,6 +3820,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 1rem; @@ -2499,6 +3936,241 @@ color: #ffffff; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2922,6 +4594,44 @@ padding: 0.5rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0.5rem; } @@ -2994,6 +4704,59 @@ background: #dde1e6; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #dde1e6; color: #343a3f; @@ -3034,6 +4797,46 @@ box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #697077; @@ -3116,6 +4919,40 @@ color: #343a3f; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.5rem; } @@ -3188,6 +5025,117 @@ background: #dde1e6; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3213,6 +5161,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3303,6 +5333,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3501,6 +5700,23 @@ padding: 0.3125rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.75rem; border: 1px solid #dee2e6; @@ -3602,6 +5818,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -3647,6 +5882,67 @@ padding: 0.5rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3671,6 +5967,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 0.75rem; @@ -3726,6 +6042,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f2f4f8; border: 0 none; @@ -3738,6 +6110,66 @@ box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -3762,6 +6194,76 @@ background: #dee2e6; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -3821,6 +6323,26 @@ border-bottom-left-radius: 1px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #f2f4f8; border: 1px solid #dee2e6; @@ -3832,6 +6354,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #343a3f; @@ -3880,6 +6472,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 1px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3948,6 +6677,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #343a3f; @@ -3990,6 +6789,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #343a3f; @@ -4033,6 +6985,61 @@ padding: 0.5rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #343a3f; color: #ffffff; @@ -4053,6 +7060,50 @@ border-bottom-color: #343a3f; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f2f4f8; padding: 0.75rem; @@ -4117,6 +7168,38 @@ border-color: #0e5d9a; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #dee2e6; @@ -4150,6 +7233,48 @@ color: #697077; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4244,6 +7369,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4311,6 +7542,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f2f4f8; @@ -4493,6 +7885,25 @@ padding-left: 1.5rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4582,6 +7993,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f2f4f8; @@ -4759,6 +8276,39 @@ padding-left: 5.5rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4918,6 +8468,59 @@ border-bottom-left-radius: 1px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4964,6 +8567,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -5005,6 +8648,55 @@ color: #1174c0; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5102,6 +8794,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.25rem 0.25rem; margin: 0; @@ -5154,6 +8866,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 1px; @@ -5238,6 +8999,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5323,6 +9157,290 @@ color: #6f2205; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5437,6 +9555,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5483,6 +9675,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #dee2e6; border-radius: 1px; @@ -5508,6 +9739,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #1174c0; color: #ffffff; @@ -5550,10 +9814,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 1px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #dee2e6; color: #343a3f; @@ -5589,6 +9887,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.25rem 0.25rem; border-radius: 1px; @@ -5605,6 +9921,43 @@ box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5665,6 +10018,113 @@ border-bottom-right-radius: 1px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5681,6 +10141,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5726,6 +10212,67 @@ stroke: #726203; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 2rem; height: 2rem; @@ -5748,6 +10295,38 @@ height: 1rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #dde1e6; border-radius: 1px; @@ -5756,6 +10335,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #1174c0; color: #ffffff; @@ -5791,6 +10386,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #343a3f; diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 391828172..19f147394 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -438,6 +654,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #a80000; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -847,6 +1320,52 @@ background: #005b9f; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #212121; } @@ -889,6 +1408,14 @@ border-color: #a80000; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -907,6 +1434,101 @@ box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #a6a6a6; @@ -1035,6 +1657,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1105,6 +1813,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a80000; } @@ -1118,6 +1927,30 @@ background-color: #f4f4f4; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1173,6 +2006,15 @@ border-color: #a80000; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1286,6 +2128,61 @@ padding: 0.53625rem 0.53625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #333333; @@ -1369,6 +2266,112 @@ border-color: #a80000; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1518,6 +2521,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #a80000; } @@ -1544,6 +2574,36 @@ background: #34A835; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1628,6 +2688,22 @@ background: #005b9f; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1703,6 +2779,44 @@ border-color: #a80000; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #c8c8c8; border: 0 none; @@ -1745,6 +2859,66 @@ border-color: #007ad9; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1825,6 +2999,21 @@ background-color: #f4f4f4; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1888,6 +3077,74 @@ border-color: #a80000; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #007ad9; @@ -2359,6 +3616,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2440,6 +3774,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2453,6 +3820,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2499,6 +3936,241 @@ color: #ffffff; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2922,6 +4594,44 @@ padding: 0.571rem 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -2994,6 +4704,59 @@ background: #eaeaea; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #eaeaea; color: #333333; @@ -3034,6 +4797,46 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #f4f4f4; color: #333333; @@ -3116,6 +4919,40 @@ color: #333333; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } @@ -3188,6 +5025,117 @@ background: #eaeaea; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3213,6 +5161,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #c8c8c8; background: #ffffff; @@ -3303,6 +5333,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3501,6 +5700,23 @@ padding: 0.71375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #007ad9; @@ -3577,6 +5793,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #c8c8c8; background: #ffffff; @@ -3622,6 +5857,67 @@ padding: 0.571rem 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3646,6 +5942,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #007ad9; padding: 0.857rem 1rem; @@ -3701,6 +6017,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; @@ -3713,6 +6085,66 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #c8c8c8; background: #ffffff; @@ -3737,6 +6169,76 @@ background: #d8dae2; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 0 none; @@ -3796,6 +6298,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #007ad9; border: 1px solid #007ad9; @@ -3807,6 +6329,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #333333; @@ -3855,6 +6447,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3923,6 +6652,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #333333; @@ -3965,6 +6764,159 @@ border-top-color: #c8c8c8; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #333333; @@ -4008,6 +6960,61 @@ padding: 0.571rem 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #333333; color: #ffffff; @@ -4028,6 +7035,50 @@ border-bottom-color: #333333; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #007ad9; padding: 0.857rem 1rem; @@ -4092,6 +7143,38 @@ border-color: #005b9f; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #c8c8c8; @@ -4125,6 +7208,48 @@ color: #333333; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4219,6 +7344,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4286,6 +7517,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #ffffff; @@ -4468,6 +7860,25 @@ padding-left: 2.571rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0; background: #ffffff; @@ -4557,6 +7968,112 @@ margin: 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4734,6 +8251,39 @@ padding-left: 9.427rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4869,6 +8419,59 @@ margin-bottom: 2px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, box-shadow 0.2s; @@ -4915,6 +8518,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -4956,6 +8599,55 @@ color: #ffffff; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #ffffff; @@ -5053,6 +8745,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5105,6 +8817,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5189,6 +8950,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5274,6 +9108,290 @@ color: #212121; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5388,6 +9506,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5434,6 +9626,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #c8c8c8; border-radius: 3px; @@ -5459,6 +9690,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #007ad9; color: #ffffff; @@ -5501,10 +9765,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #c8c8c8; color: #333333; @@ -5540,6 +9838,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5556,6 +9872,43 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5616,6 +9969,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 24px; @@ -5632,6 +10092,32 @@ line-height: 24px; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5677,6 +10163,67 @@ stroke: #212121; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5699,6 +10246,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #eaeaea; border-radius: 3px; @@ -5707,6 +10286,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #007ad9; color: #ffffff; @@ -5742,6 +10337,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #333333; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index f882ded94..d47b56b4c 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -438,6 +654,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #a80000; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -851,6 +1324,52 @@ border-color: #ffffff; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #212121; } @@ -893,6 +1412,14 @@ border-color: #a80000; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -911,6 +1438,101 @@ box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #a6a6a6; @@ -1039,6 +1661,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1109,6 +1817,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a80000; } @@ -1122,6 +1931,30 @@ background-color: #f4f4f4; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1177,6 +2010,15 @@ border-color: #a80000; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1290,6 +2132,61 @@ padding: 0.53625rem 0.53625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #333333; @@ -1373,6 +2270,112 @@ border-color: #a80000; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1522,6 +2525,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #a80000; } @@ -1548,6 +2578,36 @@ background: #34A835; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1636,6 +2696,22 @@ border-color: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1715,6 +2791,44 @@ border-color: #a80000; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #c8c8c8; border: 0 none; @@ -1757,6 +2871,66 @@ border-color: #007ad9; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1837,6 +3011,21 @@ background-color: #f4f4f4; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1900,6 +3089,74 @@ border-color: #a80000; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #007ad9; @@ -2371,6 +3628,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2452,6 +3786,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2465,6 +3832,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2511,6 +3948,241 @@ color: #ffffff; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2934,6 +4606,44 @@ padding: 0.571rem 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -3006,6 +4716,59 @@ background: #eaeaea; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #eaeaea; color: #333333; @@ -3046,6 +4809,46 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #f4f4f4; color: #333333; @@ -3128,6 +4931,40 @@ color: #333333; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } @@ -3200,6 +5037,117 @@ background: #eaeaea; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3225,6 +5173,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #c8c8c8; background: #ffffff; @@ -3315,6 +5345,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3513,6 +5712,23 @@ padding: 0.71375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #333333; @@ -3589,6 +5805,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #c8c8c8; background: #ffffff; @@ -3634,6 +5869,67 @@ padding: 0.571rem 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3658,6 +5954,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #333333; padding: 0.857rem 1rem; @@ -3713,6 +6029,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; @@ -3725,6 +6097,66 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #c8c8c8; background: #ffffff; @@ -3749,6 +6181,76 @@ background: #d8dae2; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 0 none; @@ -3808,6 +6310,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #333333; border: 1px solid #333333; @@ -3819,6 +6341,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #333333; @@ -3867,6 +6459,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3935,6 +6664,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #333333; @@ -3977,6 +6776,159 @@ border-top-color: #c8c8c8; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #333333; @@ -4020,6 +6972,61 @@ padding: 0.571rem 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #333333; color: #ffffff; @@ -4040,6 +7047,50 @@ border-bottom-color: #333333; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #333333; padding: 0.857rem 1rem; @@ -4104,6 +7155,38 @@ border-color: #005b9f; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #c8c8c8; @@ -4137,6 +7220,48 @@ color: #333333; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4231,6 +7356,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4298,6 +7529,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #ffffff; @@ -4480,6 +7872,25 @@ padding-left: 2.571rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0; background: #ffffff; @@ -4569,6 +7980,112 @@ margin: 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4746,6 +8263,39 @@ padding-left: 9.427rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4881,6 +8431,59 @@ margin-bottom: 2px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, box-shadow 0.2s; @@ -4927,6 +8530,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -4968,6 +8611,55 @@ color: #ffffff; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #ffffff; @@ -5065,6 +8757,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5117,6 +8829,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5201,6 +8962,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5286,6 +9120,290 @@ color: #212121; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5400,6 +9518,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5446,6 +9638,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #c8c8c8; border-radius: 3px; @@ -5471,6 +9702,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #007ad9; color: #ffffff; @@ -5513,10 +9777,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #c8c8c8; color: #333333; @@ -5552,6 +9850,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5568,6 +9884,43 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5628,6 +9981,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 24px; @@ -5644,6 +10104,32 @@ line-height: 24px; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5689,6 +10175,67 @@ stroke: #212121; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5711,6 +10258,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #eaeaea; border-radius: 3px; @@ -5719,6 +10298,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #007ad9; color: #ffffff; @@ -5754,6 +10349,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #333333; diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css index 9ed1b3a33..72b670fd1 100644 --- a/public/themes/nova-vue/theme.css +++ b/public/themes/nova-vue/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -438,6 +654,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #a80000; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 0.2rem #c2e9d8; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -851,6 +1324,52 @@ border-color: #ffffff; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #212121; } @@ -893,6 +1412,14 @@ border-color: #a80000; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -911,6 +1438,101 @@ box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #a6a6a6; @@ -1039,6 +1661,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1109,6 +1817,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a80000; } @@ -1122,6 +1931,30 @@ background-color: #f4f4f4; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1177,6 +2010,15 @@ border-color: #a80000; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1290,6 +2132,61 @@ padding: 0.53625rem 0.53625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #333333; @@ -1373,6 +2270,112 @@ border-color: #a80000; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1522,6 +2525,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #a80000; } @@ -1548,6 +2578,36 @@ background: #34A835; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1636,6 +2696,22 @@ border-color: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1715,6 +2791,44 @@ border-color: #a80000; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #c8c8c8; border: 0 none; @@ -1757,6 +2871,66 @@ border-color: #41b883; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1837,6 +3011,21 @@ background-color: #f4f4f4; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1900,6 +3089,74 @@ border-color: #a80000; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #41b883; @@ -2371,6 +3628,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2452,6 +3786,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2465,6 +3832,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2511,6 +3948,241 @@ color: #ffffff; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2934,6 +4606,44 @@ padding: 0.571rem 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -3006,6 +4716,59 @@ background: #eaeaea; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #eaeaea; color: #333333; @@ -3046,6 +4809,46 @@ box-shadow: 0 0 0 0.2rem #c2e9d8; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #f4f4f4; color: #333333; @@ -3128,6 +4931,40 @@ color: #333333; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } @@ -3200,6 +5037,117 @@ background: #eaeaea; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3225,6 +5173,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #c8c8c8; background: #ffffff; @@ -3315,6 +5345,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3513,6 +5712,23 @@ padding: 0.71375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #c8c8c8; @@ -3589,6 +5805,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #c8c8c8; background: #ffffff; @@ -3634,6 +5869,67 @@ padding: 0.571rem 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3658,6 +5954,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #c8c8c8; padding: 0.857rem 1rem; @@ -3713,6 +6029,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; @@ -3725,6 +6097,66 @@ box-shadow: 0 0 0 0.2rem #c2e9d8; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #c8c8c8; background: #ffffff; @@ -3749,6 +6181,76 @@ background: #d8dae2; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 0 none; @@ -3808,6 +6310,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #f4f4f4; border: 1px solid #c8c8c8; @@ -3819,6 +6341,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #333333; @@ -3867,6 +6459,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3935,6 +6664,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #333333; @@ -3977,6 +6776,159 @@ border-top-color: #c8c8c8; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #333333; @@ -4020,6 +6972,61 @@ padding: 0.571rem 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #333333; color: #ffffff; @@ -4040,6 +7047,50 @@ border-bottom-color: #333333; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f4f4f4; padding: 0.857rem 1rem; @@ -4104,6 +7155,38 @@ border-color: #246749; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #c8c8c8; @@ -4137,6 +7220,48 @@ color: #333333; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4231,6 +7356,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4298,6 +7529,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #ffffff; @@ -4480,6 +7872,25 @@ padding-left: 2.571rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0; background: #ffffff; @@ -4569,6 +7980,112 @@ margin: 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4746,6 +8263,39 @@ padding-left: 9.427rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4881,6 +8431,59 @@ margin-bottom: 2px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, box-shadow 0.2s; @@ -4927,6 +8530,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -4968,6 +8611,55 @@ color: #ffffff; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #ffffff; @@ -5065,6 +8757,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5117,6 +8829,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5201,6 +8962,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5286,6 +9120,290 @@ color: #212121; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5400,6 +9518,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5446,6 +9638,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #c8c8c8; border-radius: 3px; @@ -5471,6 +9702,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #41b883; color: #ffffff; @@ -5513,10 +9777,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #c8c8c8; color: #333333; @@ -5552,6 +9850,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5568,6 +9884,43 @@ box-shadow: 0 0 0 0.2rem #c2e9d8; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5628,6 +9981,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 24px; @@ -5644,6 +10104,32 @@ line-height: 24px; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5689,6 +10175,67 @@ stroke: #212121; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5711,6 +10258,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #eaeaea; border-radius: 3px; @@ -5719,6 +10298,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #41b883; color: #ffffff; @@ -5754,6 +10349,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #333333; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index e7111246d..3679180c8 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -438,6 +654,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #a80000; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -851,6 +1324,52 @@ border-color: #ffffff; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #212121; } @@ -893,6 +1412,14 @@ border-color: #a80000; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -911,6 +1438,101 @@ box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #a6a6a6; @@ -1039,6 +1661,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1109,6 +1817,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a80000; } @@ -1122,6 +1931,30 @@ background-color: #f4f4f4; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1177,6 +2010,15 @@ border-color: #a80000; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1290,6 +2132,61 @@ padding: 0.53625rem 0.53625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #333333; @@ -1373,6 +2270,112 @@ border-color: #a80000; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1522,6 +2525,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #a80000; } @@ -1548,6 +2578,36 @@ background: #34A835; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1636,6 +2696,22 @@ border-color: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1715,6 +2791,44 @@ border-color: #a80000; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #c8c8c8; border: 0 none; @@ -1757,6 +2871,66 @@ border-color: #007ad9; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1837,6 +3011,21 @@ background-color: #f4f4f4; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1900,6 +3089,74 @@ border-color: #a80000; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #007ad9; @@ -2371,6 +3628,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2452,6 +3786,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2465,6 +3832,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2511,6 +3948,241 @@ color: #ffffff; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2934,6 +4606,44 @@ padding: 0.571rem 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -3006,6 +4716,59 @@ background: #eaeaea; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #eaeaea; color: #333333; @@ -3046,6 +4809,46 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #f4f4f4; color: #333333; @@ -3128,6 +4931,40 @@ color: #333333; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } @@ -3200,6 +5037,117 @@ background: #eaeaea; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3225,6 +5173,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #c8c8c8; background: #ffffff; @@ -3315,6 +5345,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3513,6 +5712,23 @@ padding: 0.71375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #c8c8c8; @@ -3589,6 +5805,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #c8c8c8; background: #ffffff; @@ -3634,6 +5869,67 @@ padding: 0.571rem 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3658,6 +5954,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #c8c8c8; padding: 0.857rem 1rem; @@ -3713,6 +6029,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; @@ -3725,6 +6097,66 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #c8c8c8; background: #ffffff; @@ -3749,6 +6181,76 @@ background: #d8dae2; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 0 none; @@ -3808,6 +6310,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #f4f4f4; border: 1px solid #c8c8c8; @@ -3819,6 +6341,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #333333; @@ -3867,6 +6459,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3935,6 +6664,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #333333; @@ -3977,6 +6776,159 @@ border-top-color: #c8c8c8; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #333333; @@ -4020,6 +6972,61 @@ padding: 0.571rem 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #333333; color: #ffffff; @@ -4040,6 +7047,50 @@ border-bottom-color: #333333; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f4f4f4; padding: 0.857rem 1rem; @@ -4104,6 +7155,38 @@ border-color: #005b9f; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #c8c8c8; @@ -4137,6 +7220,48 @@ color: #333333; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4231,6 +7356,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4298,6 +7529,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #ffffff; @@ -4480,6 +7872,25 @@ padding-left: 2.571rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0; background: #ffffff; @@ -4569,6 +7980,112 @@ margin: 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4746,6 +8263,39 @@ padding-left: 9.427rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4881,6 +8431,59 @@ margin-bottom: 2px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, box-shadow 0.2s; @@ -4927,6 +8530,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -4968,6 +8611,55 @@ color: #ffffff; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #ffffff; @@ -5065,6 +8757,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5117,6 +8829,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5201,6 +8962,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5286,6 +9120,290 @@ color: #212121; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5400,6 +9518,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5446,6 +9638,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #c8c8c8; border-radius: 3px; @@ -5471,6 +9702,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #007ad9; color: #ffffff; @@ -5513,10 +9777,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #c8c8c8; color: #333333; @@ -5552,6 +9850,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5568,6 +9884,43 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5628,6 +9981,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 24px; @@ -5644,6 +10104,32 @@ line-height: 24px; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5689,6 +10175,67 @@ stroke: #212121; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5711,6 +10258,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #eaeaea; border-radius: 3px; @@ -5719,6 +10298,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #007ad9; color: #ffffff; @@ -5754,6 +10349,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #333333; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 43f1ce49f..3eda88bca 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -438,6 +654,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e7a3a3; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #dadada; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -847,6 +1320,52 @@ background: #617c8a; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #a6a6a6; } @@ -889,6 +1408,14 @@ border-color: #e7a3a3; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -907,6 +1434,101 @@ box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #dadada; @@ -1035,6 +1657,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #dbdbdb; color: #666666; @@ -1105,6 +1813,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e7a3a3; } @@ -1118,6 +1927,30 @@ background-color: #f4f4f4; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1173,6 +2006,15 @@ border-color: #e7a3a3; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1286,6 +2128,61 @@ padding: 0.53625rem 0.53625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #666666; @@ -1369,6 +2266,112 @@ border-color: #e7a3a3; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #dadada; @@ -1518,6 +2521,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #e7a3a3; } @@ -1544,6 +2574,36 @@ background: #A3E2C6; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1628,6 +2688,22 @@ background: #617c8a; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1703,6 +2779,44 @@ border-color: #e7a3a3; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #c4c4c4; border: 0 none; @@ -1745,6 +2859,66 @@ border-color: #7B95A3; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #dadada; @@ -1825,6 +2999,21 @@ background-color: #f4f4f4; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1888,6 +3077,74 @@ border-color: #e7a3a3; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #7B95A3; @@ -2359,6 +3616,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2440,6 +3774,39 @@ border-radius: 2px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 2px; } @@ -2453,6 +3820,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2499,6 +3936,241 @@ color: #385048; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2922,6 +4594,44 @@ padding: 0.571rem 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -2994,6 +4704,59 @@ background: #f4f4f4; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f4f4f4; color: #666666; @@ -3034,6 +4797,46 @@ box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #666666; @@ -3116,6 +4919,40 @@ color: #666666; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } @@ -3188,6 +5025,117 @@ background: #f4f4f4; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3213,6 +5161,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #dadada; background: #ffffff; @@ -3303,6 +5333,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3501,6 +5700,23 @@ padding: 0.71375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #7B95A3; @@ -3577,6 +5793,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #dadada; background: #ffffff; @@ -3622,6 +5857,67 @@ padding: 0.571rem 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3646,6 +5942,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #7B95A3; padding: 0.857rem 1rem; @@ -3701,6 +6017,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; @@ -3713,6 +6085,66 @@ box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #dadada; background: #ffffff; @@ -3737,6 +6169,76 @@ background: #dadada; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 0 none; @@ -3796,6 +6298,26 @@ border-bottom-left-radius: 2px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #7B95A3; border: 1px solid #7B95A3; @@ -3807,6 +6329,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #666666; @@ -3855,6 +6447,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 2px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3923,6 +6652,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #666666; @@ -3965,6 +6764,159 @@ border-top-color: #f1f1f1; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #666666; @@ -4008,6 +6960,61 @@ padding: 0.571rem 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #AFD3C8; color: #385048; @@ -4028,6 +7035,50 @@ border-bottom-color: #AFD3C8; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #7B95A3; padding: 0.857rem 1rem; @@ -4092,6 +7143,38 @@ border-color: #617c8a; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #c8c8c8; @@ -4125,6 +7208,48 @@ color: #666666; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4219,6 +7344,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4286,6 +7517,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #ffffff; @@ -4468,6 +7860,25 @@ padding-left: 2.571rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0; background: #ffffff; @@ -4557,6 +7968,112 @@ margin: 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4734,6 +8251,39 @@ padding-left: 9.427rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4869,6 +8419,59 @@ margin-bottom: 2px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4915,6 +8518,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -4956,6 +8599,55 @@ color: #385048; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #ffffff; @@ -5053,6 +8745,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5105,6 +8817,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 2px; @@ -5189,6 +8950,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5274,6 +9108,290 @@ color: #212121; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5388,6 +9506,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5434,6 +9626,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #dadada; border-radius: 2px; @@ -5459,6 +9690,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #7B95A3; color: #ffffff; @@ -5501,10 +9765,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 2px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #dadada; color: #666666; @@ -5540,6 +9838,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 2px; @@ -5556,6 +9872,43 @@ box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5616,6 +9969,113 @@ border-bottom-right-radius: 2px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 24px; @@ -5632,6 +10092,32 @@ line-height: 24px; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5677,6 +10163,67 @@ stroke: #212121; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5699,6 +10246,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #dadada; border-radius: 2px; @@ -5707,6 +10286,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #7B95A3; color: #ffffff; @@ -5742,6 +10337,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #666666; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index e9fcda33d..89900317e 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -438,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44336; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #ced4da; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -847,6 +1320,52 @@ background: #0b7ad1; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #2196F3; } @@ -889,6 +1408,14 @@ border-color: #f44336; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -907,6 +1434,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #ced4da; @@ -1035,6 +1657,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1105,6 +1813,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44336; } @@ -1118,6 +1927,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1173,6 +2006,15 @@ border-color: #f44336; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1286,6 +2128,61 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #495057; @@ -1369,6 +2266,112 @@ border-color: #f44336; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #ced4da; @@ -1518,6 +2521,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44336; } @@ -1544,6 +2574,36 @@ background: #689F38; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1628,6 +2688,22 @@ background: #0b7ad1; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1703,6 +2779,44 @@ border-color: #f44336; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #dee2e6; border: 0 none; @@ -1745,6 +2859,66 @@ border-color: #2196F3; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #ced4da; @@ -1825,6 +2999,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1888,6 +3077,74 @@ border-color: #f44336; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #2196F3; @@ -2359,6 +3616,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2440,6 +3774,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2453,6 +3820,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2499,6 +3936,241 @@ color: #495057; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2922,6 +4594,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -2994,6 +4704,59 @@ background: #e9ecef; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #495057; @@ -3034,6 +4797,46 @@ box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #6c757d; @@ -3116,6 +4919,40 @@ color: #495057; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3188,6 +5025,117 @@ background: #e9ecef; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #2196F3; border-radius: 50%; @@ -3213,6 +5161,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3303,6 +5333,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3501,6 +5700,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #dee2e6; @@ -3602,6 +5818,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -3647,6 +5882,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3671,6 +5967,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem; @@ -3726,6 +6042,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; @@ -3738,6 +6110,66 @@ box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -3762,6 +6194,76 @@ background: #dee2e6; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -3821,6 +6323,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #f8f9fa; border: 1px solid #dee2e6; @@ -3832,6 +6354,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #495057; @@ -3880,6 +6472,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3948,6 +6677,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #495057; @@ -3990,6 +6789,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #495057; @@ -4033,6 +6985,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #495057; color: #ffffff; @@ -4053,6 +7060,50 @@ border-bottom-color: #495057; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f8f9fa; padding: 1rem; @@ -4117,6 +7168,38 @@ border-color: #0b7ad1; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #dee2e6; @@ -4150,6 +7233,48 @@ color: #6c757d; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4244,6 +7369,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4311,6 +7542,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f8f9fa; @@ -4493,6 +7885,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4582,6 +7993,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f8f9fa; @@ -4759,6 +8276,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4918,6 +8468,59 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4964,6 +8567,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -5005,6 +8648,55 @@ color: #2196F3; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5102,6 +8794,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5154,6 +8866,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5238,6 +8999,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5323,6 +9157,290 @@ color: #73000c; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5437,6 +9555,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5483,6 +9675,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #dee2e6; border-radius: 3px; @@ -5508,6 +9739,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #2196F3; color: #ffffff; @@ -5550,10 +9814,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #dee2e6; color: #495057; @@ -5589,6 +9887,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -5605,6 +9921,43 @@ box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5665,6 +10018,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5681,6 +10141,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5726,6 +10212,67 @@ stroke: #6d5100; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5748,6 +10295,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e9ecef; border-radius: 3px; @@ -5756,6 +10335,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #2196F3; color: #ffffff; @@ -5791,6 +10386,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #495057; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 67febbe14..38e38ae4d 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -438,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44336; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #ced4da; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -847,6 +1320,52 @@ background: #3d8c40; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #4CAF50; } @@ -889,6 +1408,14 @@ border-color: #f44336; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -907,6 +1434,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #ced4da; @@ -1035,6 +1657,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1105,6 +1813,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44336; } @@ -1118,6 +1927,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1173,6 +2006,15 @@ border-color: #f44336; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1286,6 +2128,61 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #495057; @@ -1369,6 +2266,112 @@ border-color: #f44336; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #ced4da; @@ -1518,6 +2521,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44336; } @@ -1544,6 +2574,36 @@ background: #689F38; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1628,6 +2688,22 @@ background: #3d8c40; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1703,6 +2779,44 @@ border-color: #f44336; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #dee2e6; border: 0 none; @@ -1745,6 +2859,66 @@ border-color: #4CAF50; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #ced4da; @@ -1825,6 +2999,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1888,6 +3077,74 @@ border-color: #f44336; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #4CAF50; @@ -2359,6 +3616,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2440,6 +3774,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2453,6 +3820,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2499,6 +3936,241 @@ color: #495057; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2922,6 +4594,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -2994,6 +4704,59 @@ background: #e9ecef; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #495057; @@ -3034,6 +4797,46 @@ box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #6c757d; @@ -3116,6 +4919,40 @@ color: #495057; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3188,6 +5025,117 @@ background: #e9ecef; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #4CAF50; border-radius: 50%; @@ -3213,6 +5161,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3303,6 +5333,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3501,6 +5700,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #dee2e6; @@ -3602,6 +5818,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -3647,6 +5882,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3671,6 +5967,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem; @@ -3726,6 +6042,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; @@ -3738,6 +6110,66 @@ box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -3762,6 +6194,76 @@ background: #dee2e6; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -3821,6 +6323,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #f8f9fa; border: 1px solid #dee2e6; @@ -3832,6 +6354,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #495057; @@ -3880,6 +6472,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3948,6 +6677,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #495057; @@ -3990,6 +6789,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #495057; @@ -4033,6 +6985,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #495057; color: #ffffff; @@ -4053,6 +7060,50 @@ border-bottom-color: #495057; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f8f9fa; padding: 1rem; @@ -4117,6 +7168,38 @@ border-color: #3d8c40; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #dee2e6; @@ -4150,6 +7233,48 @@ color: #6c757d; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4244,6 +7369,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4311,6 +7542,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f8f9fa; @@ -4493,6 +7885,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4582,6 +7993,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f8f9fa; @@ -4759,6 +8276,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4918,6 +8468,59 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4964,6 +8567,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -5005,6 +8648,55 @@ color: #4CAF50; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5102,6 +8794,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5154,6 +8866,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5238,6 +8999,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5323,6 +9157,290 @@ color: #73000c; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5437,6 +9555,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5483,6 +9675,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #dee2e6; border-radius: 3px; @@ -5508,6 +9739,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #4CAF50; color: #ffffff; @@ -5550,10 +9814,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #dee2e6; color: #495057; @@ -5589,6 +9887,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -5605,6 +9921,43 @@ box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5665,6 +10018,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5681,6 +10141,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5726,6 +10212,67 @@ stroke: #6d5100; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5748,6 +10295,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e9ecef; border-radius: 3px; @@ -5756,6 +10335,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #4CAF50; color: #ffffff; @@ -5791,6 +10386,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #495057; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 48c41e98e..a9faaa2ce 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -438,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44336; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #ced4da; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -847,6 +1320,52 @@ background: #d29d00; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #FFC107; } @@ -889,6 +1408,14 @@ border-color: #f44336; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -907,6 +1434,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #ced4da; @@ -1035,6 +1657,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1105,6 +1813,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44336; } @@ -1118,6 +1927,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1173,6 +2006,15 @@ border-color: #f44336; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1286,6 +2128,61 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #495057; @@ -1369,6 +2266,112 @@ border-color: #f44336; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #ced4da; @@ -1518,6 +2521,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44336; } @@ -1544,6 +2574,36 @@ background: #689F38; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1628,6 +2688,22 @@ background: #d29d00; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1703,6 +2779,44 @@ border-color: #f44336; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #dee2e6; border: 0 none; @@ -1745,6 +2859,66 @@ border-color: #FFC107; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #ced4da; @@ -1825,6 +2999,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1888,6 +3077,74 @@ border-color: #f44336; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #212529; background: #FFC107; @@ -2359,6 +3616,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2440,6 +3774,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2453,6 +3820,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2499,6 +3936,241 @@ color: #495057; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2922,6 +4594,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -2994,6 +4704,59 @@ background: #e9ecef; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #495057; @@ -3034,6 +4797,46 @@ box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #6c757d; @@ -3116,6 +4919,40 @@ color: #495057; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3188,6 +5025,117 @@ background: #e9ecef; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #FFC107; border-radius: 50%; @@ -3213,6 +5161,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3303,6 +5333,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3501,6 +5700,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #dee2e6; @@ -3602,6 +5818,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -3647,6 +5882,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3671,6 +5967,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem; @@ -3726,6 +6042,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; @@ -3738,6 +6110,66 @@ box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -3762,6 +6194,76 @@ background: #dee2e6; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -3821,6 +6323,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #f8f9fa; border: 1px solid #dee2e6; @@ -3832,6 +6354,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #495057; @@ -3880,6 +6472,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3948,6 +6677,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #495057; @@ -3990,6 +6789,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #495057; @@ -4033,6 +6985,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #495057; color: #ffffff; @@ -4053,6 +7060,50 @@ border-bottom-color: #495057; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f8f9fa; padding: 1rem; @@ -4117,6 +7168,38 @@ border-color: #d29d00; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #dee2e6; @@ -4150,6 +7233,48 @@ color: #6c757d; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4244,6 +7369,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4311,6 +7542,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f8f9fa; @@ -4493,6 +7885,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4582,6 +7993,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f8f9fa; @@ -4759,6 +8276,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4918,6 +8468,59 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4964,6 +8567,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -5005,6 +8648,55 @@ color: #FFC107; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5102,6 +8794,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5154,6 +8866,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5238,6 +8999,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5323,6 +9157,290 @@ color: #73000c; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5437,6 +9555,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5483,6 +9675,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #dee2e6; border-radius: 3px; @@ -5508,6 +9739,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #FFC107; color: #212529; @@ -5550,10 +9814,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #dee2e6; color: #495057; @@ -5589,6 +9887,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -5605,6 +9921,43 @@ box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5665,6 +10018,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5681,6 +10141,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5726,6 +10212,67 @@ stroke: #6d5100; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5748,6 +10295,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e9ecef; border-radius: 3px; @@ -5756,6 +10335,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #FFC107; color: #212529; @@ -5791,6 +10386,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #495057; diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index 772433b1d..d888fb445 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -438,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44336; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 0.2rem #df9eea; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #ced4da; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -847,6 +1320,52 @@ background: #7d1f8d; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #9C27B0; } @@ -889,6 +1408,14 @@ border-color: #f44336; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -907,6 +1434,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #ced4da; @@ -1035,6 +1657,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1105,6 +1813,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44336; } @@ -1118,6 +1927,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1173,6 +2006,15 @@ border-color: #f44336; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1286,6 +2128,61 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #495057; @@ -1369,6 +2266,112 @@ border-color: #f44336; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #ced4da; @@ -1518,6 +2521,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44336; } @@ -1544,6 +2574,36 @@ background: #689F38; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1628,6 +2688,22 @@ background: #7d1f8d; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1703,6 +2779,44 @@ border-color: #f44336; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #dee2e6; border: 0 none; @@ -1745,6 +2859,66 @@ border-color: #9C27B0; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #ced4da; @@ -1825,6 +2999,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1888,6 +3077,74 @@ border-color: #f44336; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #9C27B0; @@ -2359,6 +3616,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2440,6 +3774,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2453,6 +3820,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2499,6 +3936,241 @@ color: #495057; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2922,6 +4594,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -2994,6 +4704,59 @@ background: #e9ecef; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #495057; @@ -3034,6 +4797,46 @@ box-shadow: 0 0 0 0.2rem #df9eea; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #6c757d; @@ -3116,6 +4919,40 @@ color: #495057; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3188,6 +5025,117 @@ background: #e9ecef; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #9C27B0; border-radius: 50%; @@ -3213,6 +5161,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3303,6 +5333,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3501,6 +5700,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #dee2e6; @@ -3602,6 +5818,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -3647,6 +5882,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3671,6 +5967,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem; @@ -3726,6 +6042,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; @@ -3738,6 +6110,66 @@ box-shadow: 0 0 0 0.2rem #df9eea; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -3762,6 +6194,76 @@ background: #dee2e6; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -3821,6 +6323,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #f8f9fa; border: 1px solid #dee2e6; @@ -3832,6 +6354,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #495057; @@ -3880,6 +6472,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3948,6 +6677,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #495057; @@ -3990,6 +6789,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #495057; @@ -4033,6 +6985,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #495057; color: #ffffff; @@ -4053,6 +7060,50 @@ border-bottom-color: #495057; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f8f9fa; padding: 1rem; @@ -4117,6 +7168,38 @@ border-color: #7d1f8d; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #dee2e6; @@ -4150,6 +7233,48 @@ color: #6c757d; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4244,6 +7369,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4311,6 +7542,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f8f9fa; @@ -4493,6 +7885,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4582,6 +7993,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f8f9fa; @@ -4759,6 +8276,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4918,6 +8468,59 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4964,6 +8567,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -5005,6 +8648,55 @@ color: #9C27B0; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5102,6 +8794,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5154,6 +8866,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5238,6 +8999,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5323,6 +9157,290 @@ color: #73000c; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5437,6 +9555,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5483,6 +9675,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #dee2e6; border-radius: 3px; @@ -5508,6 +9739,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #9C27B0; color: #ffffff; @@ -5550,10 +9814,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #dee2e6; color: #495057; @@ -5589,6 +9887,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -5605,6 +9921,43 @@ box-shadow: 0 0 0 0.2rem #df9eea; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5665,6 +10018,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5681,6 +10141,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5726,6 +10212,67 @@ stroke: #6d5100; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5748,6 +10295,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e9ecef; border-radius: 3px; @@ -5756,6 +10335,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #9C27B0; color: #ffffff; @@ -5791,6 +10386,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #495057; diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css index 742662f28..71d749d97 100644 --- a/public/themes/soho-dark/theme.css +++ b/public/themes/soho-dark/theme.css @@ -295,6 +295,126 @@ } @layer primevue { + .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; } @@ -370,6 +490,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -462,6 +678,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ff9a9a; } @@ -696,6 +1062,96 @@ box-shadow: 0 0 0 1px #e0d8fc; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #1d1e27; border: 1px solid #3e4053; @@ -786,6 +1242,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 22px; height: 22px; @@ -871,6 +1344,52 @@ background: #9378f4; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #b19df7; } @@ -913,6 +1432,14 @@ border-color: #ff9a9a; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -931,6 +1458,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #1d1e27; border: 1px solid #3e4053; @@ -1059,6 +1681,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #282936; color: rgba(255, 255, 255, 0.6); @@ -1129,6 +1837,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ff9a9a; } @@ -1142,6 +1951,30 @@ background-color: #3e4053; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1197,6 +2030,15 @@ border-color: #ff9a9a; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1310,6 +2152,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -1393,6 +2290,112 @@ border-color: #ff9a9a; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #1d1e27; border: 1px solid #3e4053; @@ -1542,6 +2545,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #ff9a9a; } @@ -1568,6 +2598,36 @@ background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 22px; height: 22px; @@ -1652,6 +2712,22 @@ background: #9378f4; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1727,6 +2803,44 @@ border-color: #ff9a9a; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #3e4053; border: 0 none; @@ -1769,6 +2883,66 @@ border-color: #b19df7; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #1d1e27; border: 1px solid #3e4053; @@ -1849,6 +3023,21 @@ background-color: #3e4053; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1912,6 +3101,74 @@ border-color: #ff9a9a; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #1c1d26; background: #b19df7; @@ -2432,6 +3689,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2513,6 +3847,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2526,6 +3893,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2572,6 +4009,241 @@ color: #b19df7; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2995,6 +4667,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3067,6 +4777,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3107,6 +4870,46 @@ box-shadow: 0 0 0 1px #e0d8fc; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #282936; color: rgba(255, 255, 255, 0.6); @@ -3189,6 +4992,40 @@ color: rgba(255, 255, 255, 0.87); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3261,6 +5098,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #b19df7; border-radius: 50%; @@ -3286,6 +5234,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #3e4053; background: #282936; @@ -3376,6 +5406,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3574,6 +5773,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #3e4053; @@ -3650,6 +5866,25 @@ padding: 1.25rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #3e4053; background: #282936; @@ -3695,6 +5930,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #282936; } @@ -3719,6 +6015,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #3e4053; padding: 1.25rem; @@ -3774,6 +6090,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3e4053; border: 0 none; @@ -3786,6 +6158,66 @@ box-shadow: 0 0 0 1px #e0d8fc; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #3e4053; background: #282936; @@ -3810,6 +6242,76 @@ background: #3e4053; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #3e4053; @@ -3869,6 +6371,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #282936; border: 1px solid #3e4053; @@ -3880,6 +6402,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -3928,6 +6520,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3996,6 +6725,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -4038,6 +6837,159 @@ border-top-color: #3e4053; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -4081,6 +7033,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #3e4053; color: rgba(255, 255, 255, 0.87); @@ -4101,6 +7108,50 @@ border-bottom-color: #3e4053; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #282936; padding: 1.25rem; @@ -4165,6 +7216,38 @@ border-color: #9378f4; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #333544; border: 1px solid #3e4053; @@ -4198,6 +7281,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #333544; @@ -4292,6 +7417,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4359,6 +7590,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #333544; @@ -4541,6 +7933,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #333544; @@ -4630,6 +8041,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #333544; @@ -4807,6 +8324,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4942,6 +8492,59 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4988,6 +8591,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #3e4053; @@ -5029,6 +8672,55 @@ color: #b19df7; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #333544; @@ -5126,6 +8818,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5178,6 +8890,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5262,6 +9023,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5347,6 +9181,290 @@ color: #ff5757; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5461,6 +9579,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5507,6 +9699,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #3e4053; border-radius: 6px; @@ -5532,6 +9763,39 @@ border: 2px solid #282936; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #b19df7; color: #1c1d26; @@ -5574,10 +9838,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #3e4053; color: rgba(255, 255, 255, 0.87); @@ -5613,6 +9911,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5629,6 +9945,43 @@ box-shadow: 0 0 0 1px #e0d8fc; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5689,6 +10042,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5705,6 +10165,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5750,6 +10236,67 @@ stroke: #cc8925; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5772,6 +10319,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5780,6 +10359,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #b19df7; color: #1c1d26; @@ -5815,6 +10410,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #282936; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css index b740c2f74..b86fb3502 100644 --- a/public/themes/soho-light/theme.css +++ b/public/themes/soho-light/theme.css @@ -295,6 +295,126 @@ } @layer primevue { + .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; } @@ -370,6 +490,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -462,6 +678,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ff6767; } @@ -696,6 +1062,96 @@ box-shadow: 0 0 0 1px #c7bbfa; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #d3dbe3; @@ -786,6 +1242,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 22px; height: 22px; @@ -871,6 +1344,52 @@ background: #5935f1; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #7254f3; } @@ -913,6 +1432,14 @@ border-color: #ff6767; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -931,6 +1458,101 @@ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #d3dbe3; @@ -1059,6 +1681,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #f6f9fc; color: #708da9; @@ -1129,6 +1837,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ff6767; } @@ -1142,6 +1951,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1197,6 +2030,15 @@ border-color: #ff6767; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1310,6 +2152,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #043d75; @@ -1393,6 +2290,112 @@ border-color: #ff6767; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #d3dbe3; @@ -1542,6 +2545,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #ff6767; } @@ -1568,6 +2598,36 @@ background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 22px; height: 22px; @@ -1652,6 +2712,22 @@ background: #5935f1; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1727,6 +2803,44 @@ border-color: #ff6767; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #dfe7ef; border: 0 none; @@ -1769,6 +2883,66 @@ border-color: #7254f3; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #d3dbe3; @@ -1849,6 +3023,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1912,6 +3101,74 @@ border-color: #ff6767; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #7254f3; @@ -2432,6 +3689,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2513,6 +3847,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2526,6 +3893,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2572,6 +4009,241 @@ color: #5a37f1; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2995,6 +4667,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3067,6 +4777,59 @@ background: #f6f9fc; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f6f9fc; color: #043d75; @@ -3107,6 +4870,46 @@ box-shadow: 0 0 0 1px #c7bbfa; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #708da9; @@ -3189,6 +4992,40 @@ color: #043d75; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3261,6 +5098,117 @@ background: #f6f9fc; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #7254f3; border-radius: 50%; @@ -3286,6 +5234,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #dfe7ef; background: #ffffff; @@ -3376,6 +5406,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3574,6 +5773,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #dfe7ef; @@ -3650,6 +5866,25 @@ padding: 1.25rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #dfe7ef; background: #ffffff; @@ -3695,6 +5930,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3719,6 +6015,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #dfe7ef; padding: 1.25rem; @@ -3774,6 +6090,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #eff3f8; border: 0 none; @@ -3786,6 +6158,66 @@ box-shadow: 0 0 0 1px #c7bbfa; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #dfe7ef; background: #ffffff; @@ -3810,6 +6242,76 @@ background: #dfe7ef; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #dfe7ef; @@ -3869,6 +6371,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #eff3f8; border: 1px solid #dfe7ef; @@ -3880,6 +6402,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #043d75; @@ -3928,6 +6520,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -3996,6 +6725,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #043d75; @@ -4038,6 +6837,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #043d75; @@ -4081,6 +7033,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #043d75; color: #ffffff; @@ -4101,6 +7108,50 @@ border-bottom-color: #043d75; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #eff3f8; padding: 1.25rem; @@ -4165,6 +7216,38 @@ border-color: #5935f1; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #eff3f8; border: 1px solid #dfe7ef; @@ -4198,6 +7281,48 @@ color: #708da9; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #eff3f8; @@ -4292,6 +7417,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4359,6 +7590,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #eff3f8; @@ -4541,6 +7933,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #eff3f8; @@ -4630,6 +8041,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #eff3f8; @@ -4807,6 +8324,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4942,6 +8492,59 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4988,6 +8591,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dfe7ef; @@ -5029,6 +8672,55 @@ color: #7254f3; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #eff3f8; @@ -5126,6 +8818,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5178,6 +8890,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5262,6 +9023,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5347,6 +9181,290 @@ color: #ff5757; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5461,6 +9579,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5507,6 +9699,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #dfe7ef; border-radius: 6px; @@ -5532,6 +9763,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #7254f3; color: #ffffff; @@ -5574,10 +9838,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #dfe7ef; color: #043d75; @@ -5613,6 +9911,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5629,6 +9945,43 @@ box-shadow: 0 0 0 1px #c7bbfa; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5689,6 +10042,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5705,6 +10165,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5750,6 +10236,67 @@ stroke: #cc8925; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5772,6 +10319,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #dfe7ef; border-radius: 6px; @@ -5780,6 +10359,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #7254f3; color: #ffffff; @@ -5815,6 +10410,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #043d75; diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index cbb3075a7..c90fa6bc9 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -306,6 +306,126 @@ } @layer primevue { + .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; } @@ -381,6 +501,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -473,6 +689,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f0a9a7; } @@ -707,6 +1073,96 @@ box-shadow: 0 0 0 1px #6366F1; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 1px solid #d4d4d8; @@ -797,6 +1253,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 16px; height: 16px; @@ -882,6 +1355,52 @@ background: #4F46E5; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #d4d4d8; } @@ -924,6 +1443,14 @@ border-color: #f0a9a7; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -942,6 +1469,101 @@ box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 1px solid #d4d4d8; @@ -1070,6 +1692,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #fafafa; color: #71717A; @@ -1140,6 +1848,107 @@ width: 3rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f0a9a7; } @@ -1153,6 +1962,30 @@ background-color: #ffffff; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1208,6 +2041,15 @@ border-color: #f0a9a7; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1321,6 +2163,61 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #3f3f46; @@ -1404,6 +2301,112 @@ border-color: #f0a9a7; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 1px solid #d4d4d8; @@ -1553,6 +2556,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f0a9a7; } @@ -1579,6 +2609,36 @@ background: #22C55E; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 16px; height: 16px; @@ -1663,6 +2723,22 @@ background: #4F46E5; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1738,6 +2814,44 @@ border-color: #f0a9a7; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1780,6 +2894,66 @@ border-color: #4F46E5; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #d4d4d8; @@ -1860,6 +3034,21 @@ background-color: #ffffff; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1923,6 +3112,74 @@ border-color: #f0a9a7; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #4F46E5; @@ -2394,6 +3651,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2475,6 +3809,39 @@ border-radius: 0.375rem; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 0.375rem; } @@ -2488,6 +3855,76 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2534,6 +3971,241 @@ color: #312E81; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2957,6 +4629,44 @@ padding: 1.25rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3029,6 +4739,59 @@ background: #f4f4f5; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f4f4f5; color: #18181B; @@ -3069,6 +4832,46 @@ box-shadow: 0 0 0 1px #6366F1; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #71717A; @@ -3151,6 +4954,40 @@ color: #3f3f46; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3223,6 +5060,117 @@ background: #f4f4f5; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #4F46E5; border-radius: 50%; @@ -3248,6 +5196,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3338,6 +5368,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3536,6 +5735,23 @@ padding: 0.9375rem 1.875rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3637,6 +5853,25 @@ padding: 1.25rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -3682,6 +5917,67 @@ padding: 1.25rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3706,6 +6002,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -3761,6 +6077,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #fafafa; border: 0 none; @@ -3773,6 +6145,66 @@ box-shadow: 0 0 0 1px #6366F1; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -3797,6 +6229,76 @@ background: #e5e7eb; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -3856,6 +6358,26 @@ border-bottom-left-radius: 0.375rem; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #fafafa; border: 1px solid #e5e7eb; @@ -3867,6 +6389,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #3f3f46; @@ -3915,6 +6507,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 0.375rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); @@ -3983,6 +6712,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #3f3f46; @@ -4025,6 +6824,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #3f3f46; @@ -4068,6 +7020,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #3f3f46; color: #ffffff; @@ -4088,6 +7095,50 @@ border-bottom-color: #3f3f46; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #fafafa; padding: 1.25rem; @@ -4152,6 +7203,38 @@ border-color: #4338CA; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4185,6 +7268,48 @@ color: #71717A; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4279,6 +7404,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4346,6 +7577,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 1rem; background: #fafafa; @@ -4528,6 +7920,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4617,6 +8028,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 1rem; background: #fafafa; @@ -4794,6 +8311,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4953,6 +8503,59 @@ border-bottom-left-radius: 0.375rem; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -4999,6 +8602,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -5040,6 +8683,55 @@ color: #4F46E5; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5137,6 +8829,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5189,6 +8901,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 0.375rem; @@ -5273,6 +9034,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5358,6 +9192,290 @@ color: #DC2626; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5472,6 +9590,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5518,6 +9710,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e5e7eb; border-radius: 0.375rem; @@ -5543,6 +9774,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #4F46E5; color: #ffffff; @@ -5585,10 +9849,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 0.375rem; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #e5e7eb; color: #3f3f46; @@ -5624,6 +9922,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 0.375rem; @@ -5640,6 +9956,43 @@ box-shadow: 0 0 0 1px #6366F1; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5700,6 +10053,113 @@ border-bottom-right-radius: 0.375rem; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5716,6 +10176,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5761,6 +10247,67 @@ stroke: #D97706; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5783,6 +10330,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #f4f4f5; border-radius: 0.375rem; @@ -5791,6 +10370,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #4F46E5; color: #ffffff; @@ -5826,6 +10421,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #3f3f46; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 53c0f46a9..d118c512a 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -438,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 1px #93cbf9; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #17212f; border: 1px solid #304562; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -847,6 +1320,52 @@ background: #2396f2; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #64B5F6; } @@ -889,6 +1408,14 @@ border-color: #ef9a9a; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -907,6 +1434,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #17212f; border: 1px solid #304562; @@ -1035,6 +1657,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1105,6 +1813,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1118,6 +1927,30 @@ background-color: #304562; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1173,6 +2006,15 @@ border-color: #ef9a9a; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1286,6 +2128,61 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1369,6 +2266,112 @@ border-color: #ef9a9a; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #17212f; border: 1px solid #304562; @@ -1518,6 +2521,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1544,6 +2574,36 @@ background: #C5E1A5; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1628,6 +2688,22 @@ background: #2396f2; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1703,6 +2779,44 @@ border-color: #ef9a9a; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #304562; border: 0 none; @@ -1745,6 +2859,66 @@ border-color: #64B5F6; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #17212f; border: 1px solid #304562; @@ -1825,6 +2999,21 @@ background-color: #304562; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1888,6 +3077,74 @@ border-color: #ef9a9a; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #212529; background: #64B5F6; @@ -2359,6 +3616,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2440,6 +3774,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2453,6 +3820,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2499,6 +3936,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2922,6 +4594,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -2994,6 +4704,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3034,6 +4797,46 @@ box-shadow: 0 0 0 1px #93cbf9; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3116,6 +4919,40 @@ color: rgba(255, 255, 255, 0.87); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3188,6 +5025,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #64B5F6; border-radius: 50%; @@ -3213,6 +5161,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #304562; background: #1f2d40; @@ -3303,6 +5333,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3501,6 +5700,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #304562; @@ -3602,6 +5818,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #304562; background: #1f2d40; @@ -3647,6 +5882,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2d40; } @@ -3671,6 +5967,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #304562; padding: 1rem; @@ -3726,6 +6042,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; @@ -3738,6 +6110,66 @@ box-shadow: 0 0 0 1px #93cbf9; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #304562; background: #1f2d40; @@ -3762,6 +6194,76 @@ background: #304562; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #304562; @@ -3821,6 +6323,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1f2d40; border: 1px solid #304562; @@ -3832,6 +6354,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3880,6 +6472,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3948,6 +6677,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3990,6 +6789,159 @@ border-top-color: #304562; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4033,6 +6985,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #304562; color: rgba(255, 255, 255, 0.87); @@ -4053,6 +7060,50 @@ border-bottom-color: #304562; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2d40; padding: 1rem; @@ -4117,6 +7168,38 @@ border-color: #2396f2; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #1f2d40; border: 1px solid #304562; @@ -4150,6 +7233,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #1f2d40; @@ -4244,6 +7369,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4311,6 +7542,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #1f2d40; @@ -4493,6 +7885,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #1f2d40; @@ -4582,6 +7993,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #1f2d40; @@ -4759,6 +8276,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4918,6 +8468,59 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4964,6 +8567,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #304562; @@ -5005,6 +8648,55 @@ color: #64B5F6; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #1f2d40; @@ -5102,6 +8794,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5154,6 +8866,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5238,6 +8999,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5323,6 +9157,290 @@ color: #73000c; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5437,6 +9555,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5483,6 +9675,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #304562; border-radius: 3px; @@ -5508,6 +9739,39 @@ border: 2px solid #1f2d40; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #64B5F6; color: #212529; @@ -5550,10 +9814,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #304562; color: rgba(255, 255, 255, 0.87); @@ -5589,6 +9887,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -5605,6 +9921,43 @@ box-shadow: 0 0 0 1px #93cbf9; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5665,6 +10018,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5681,6 +10141,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5726,6 +10212,67 @@ stroke: #6d5100; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5748,6 +10295,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5756,6 +10335,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #64B5F6; color: #212529; @@ -5791,6 +10386,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1f2d40; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 621c7de67..4daae3ff0 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -438,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 1px #a7d8a9; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #17212f; border: 1px solid #304562; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -847,6 +1320,52 @@ background: #54b358; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #81C784; } @@ -889,6 +1408,14 @@ border-color: #ef9a9a; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -907,6 +1434,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #17212f; border: 1px solid #304562; @@ -1035,6 +1657,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1105,6 +1813,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1118,6 +1927,30 @@ background-color: #304562; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1173,6 +2006,15 @@ border-color: #ef9a9a; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1286,6 +2128,61 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1369,6 +2266,112 @@ border-color: #ef9a9a; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #17212f; border: 1px solid #304562; @@ -1518,6 +2521,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1544,6 +2574,36 @@ background: #C5E1A5; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1628,6 +2688,22 @@ background: #54b358; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1703,6 +2779,44 @@ border-color: #ef9a9a; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #304562; border: 0 none; @@ -1745,6 +2859,66 @@ border-color: #81C784; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #17212f; border: 1px solid #304562; @@ -1825,6 +2999,21 @@ background-color: #304562; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1888,6 +3077,74 @@ border-color: #ef9a9a; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #212529; background: #81C784; @@ -2359,6 +3616,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2440,6 +3774,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2453,6 +3820,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2499,6 +3936,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2922,6 +4594,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -2994,6 +4704,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3034,6 +4797,46 @@ box-shadow: 0 0 0 1px #a7d8a9; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3116,6 +4919,40 @@ color: rgba(255, 255, 255, 0.87); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3188,6 +5025,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #81C784; border-radius: 50%; @@ -3213,6 +5161,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #304562; background: #1f2d40; @@ -3303,6 +5333,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3501,6 +5700,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #304562; @@ -3602,6 +5818,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #304562; background: #1f2d40; @@ -3647,6 +5882,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2d40; } @@ -3671,6 +5967,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #304562; padding: 1rem; @@ -3726,6 +6042,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; @@ -3738,6 +6110,66 @@ box-shadow: 0 0 0 1px #a7d8a9; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #304562; background: #1f2d40; @@ -3762,6 +6194,76 @@ background: #304562; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #304562; @@ -3821,6 +6323,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1f2d40; border: 1px solid #304562; @@ -3832,6 +6354,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3880,6 +6472,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3948,6 +6677,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3990,6 +6789,159 @@ border-top-color: #304562; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4033,6 +6985,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #304562; color: rgba(255, 255, 255, 0.87); @@ -4053,6 +7060,50 @@ border-bottom-color: #304562; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2d40; padding: 1rem; @@ -4117,6 +7168,38 @@ border-color: #54b358; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #1f2d40; border: 1px solid #304562; @@ -4150,6 +7233,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #1f2d40; @@ -4244,6 +7369,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4311,6 +7542,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #1f2d40; @@ -4493,6 +7885,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #1f2d40; @@ -4582,6 +7993,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #1f2d40; @@ -4759,6 +8276,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4918,6 +8468,59 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4964,6 +8567,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #304562; @@ -5005,6 +8648,55 @@ color: #81C784; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #1f2d40; @@ -5102,6 +8794,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5154,6 +8866,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5238,6 +8999,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5323,6 +9157,290 @@ color: #73000c; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5437,6 +9555,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5483,6 +9675,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #304562; border-radius: 3px; @@ -5508,6 +9739,39 @@ border: 2px solid #1f2d40; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #81C784; color: #212529; @@ -5550,10 +9814,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #304562; color: rgba(255, 255, 255, 0.87); @@ -5589,6 +9887,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -5605,6 +9921,43 @@ box-shadow: 0 0 0 1px #a7d8a9; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5665,6 +10018,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5681,6 +10141,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5726,6 +10212,67 @@ stroke: #6d5100; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5748,6 +10295,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5756,6 +10335,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #81C784; color: #212529; @@ -5791,6 +10386,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1f2d40; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index afdf0ecd7..e1425b0a0 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -438,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 1px #ffe284; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #17212f; border: 1px solid #304562; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -847,6 +1320,52 @@ background: #ffc50c; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #FFD54F; } @@ -889,6 +1408,14 @@ border-color: #ef9a9a; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -907,6 +1434,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #17212f; border: 1px solid #304562; @@ -1035,6 +1657,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1105,6 +1813,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1118,6 +1927,30 @@ background-color: #304562; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1173,6 +2006,15 @@ border-color: #ef9a9a; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1286,6 +2128,61 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1369,6 +2266,112 @@ border-color: #ef9a9a; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #17212f; border: 1px solid #304562; @@ -1518,6 +2521,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1544,6 +2574,36 @@ background: #C5E1A5; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1628,6 +2688,22 @@ background: #ffc50c; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1703,6 +2779,44 @@ border-color: #ef9a9a; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #304562; border: 0 none; @@ -1745,6 +2859,66 @@ border-color: #FFD54F; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #17212f; border: 1px solid #304562; @@ -1825,6 +2999,21 @@ background-color: #304562; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1888,6 +3077,74 @@ border-color: #ef9a9a; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #212529; background: #FFD54F; @@ -2359,6 +3616,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2440,6 +3774,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2453,6 +3820,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2499,6 +3936,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2922,6 +4594,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -2994,6 +4704,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3034,6 +4797,46 @@ box-shadow: 0 0 0 1px #ffe284; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3116,6 +4919,40 @@ color: rgba(255, 255, 255, 0.87); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3188,6 +5025,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #FFD54F; border-radius: 50%; @@ -3213,6 +5161,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #304562; background: #1f2d40; @@ -3303,6 +5333,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3501,6 +5700,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #304562; @@ -3602,6 +5818,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #304562; background: #1f2d40; @@ -3647,6 +5882,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2d40; } @@ -3671,6 +5967,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #304562; padding: 1rem; @@ -3726,6 +6042,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; @@ -3738,6 +6110,66 @@ box-shadow: 0 0 0 1px #ffe284; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #304562; background: #1f2d40; @@ -3762,6 +6194,76 @@ background: #304562; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #304562; @@ -3821,6 +6323,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1f2d40; border: 1px solid #304562; @@ -3832,6 +6354,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3880,6 +6472,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3948,6 +6677,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3990,6 +6789,159 @@ border-top-color: #304562; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4033,6 +6985,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #304562; color: rgba(255, 255, 255, 0.87); @@ -4053,6 +7060,50 @@ border-bottom-color: #304562; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2d40; padding: 1rem; @@ -4117,6 +7168,38 @@ border-color: #ffc50c; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #1f2d40; border: 1px solid #304562; @@ -4150,6 +7233,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #1f2d40; @@ -4244,6 +7369,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4311,6 +7542,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #1f2d40; @@ -4493,6 +7885,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #1f2d40; @@ -4582,6 +7993,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #1f2d40; @@ -4759,6 +8276,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4918,6 +8468,59 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4964,6 +8567,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #304562; @@ -5005,6 +8648,55 @@ color: #FFD54F; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #1f2d40; @@ -5102,6 +8794,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5154,6 +8866,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5238,6 +8999,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5323,6 +9157,290 @@ color: #73000c; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5437,6 +9555,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5483,6 +9675,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #304562; border-radius: 3px; @@ -5508,6 +9739,39 @@ border: 2px solid #1f2d40; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #FFD54F; color: #212529; @@ -5550,10 +9814,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #304562; color: rgba(255, 255, 255, 0.87); @@ -5589,6 +9887,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -5605,6 +9921,43 @@ box-shadow: 0 0 0 1px #ffe284; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5665,6 +10018,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5681,6 +10141,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5726,6 +10212,67 @@ stroke: #6d5100; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5748,6 +10295,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5756,6 +10335,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #FFD54F; color: #212529; @@ -5791,6 +10386,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1f2d40; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index f363e0000..daebd2fbd 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .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; } @@ -346,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -438,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -672,6 +1038,96 @@ box-shadow: 0 0 0 1px #cf95d9; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #17212f; border: 1px solid #304562; @@ -762,6 +1218,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -847,6 +1320,52 @@ background: #a241b2; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #BA68C8; } @@ -889,6 +1408,14 @@ border-color: #ef9a9a; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -907,6 +1434,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #17212f; border: 1px solid #304562; @@ -1035,6 +1657,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1105,6 +1813,107 @@ width: 2.357rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1118,6 +1927,30 @@ background-color: #304562; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1173,6 +2006,15 @@ border-color: #ef9a9a; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1286,6 +2128,61 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1369,6 +2266,112 @@ border-color: #ef9a9a; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #17212f; border: 1px solid #304562; @@ -1518,6 +2521,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1544,6 +2574,36 @@ background: #C5E1A5; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1628,6 +2688,22 @@ background: #a241b2; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1703,6 +2779,44 @@ border-color: #ef9a9a; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #304562; border: 0 none; @@ -1745,6 +2859,66 @@ border-color: #BA68C8; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #17212f; border: 1px solid #304562; @@ -1825,6 +2999,21 @@ background-color: #304562; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1888,6 +3077,74 @@ border-color: #ef9a9a; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #BA68C8; @@ -2359,6 +3616,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2440,6 +3774,39 @@ border-radius: 3px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 3px; } @@ -2453,6 +3820,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2499,6 +3936,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2922,6 +4594,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -2994,6 +4704,59 @@ background: rgba(255, 255, 255, 0.03); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3034,6 +4797,46 @@ box-shadow: 0 0 0 1px #cf95d9; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3116,6 +4919,40 @@ color: rgba(255, 255, 255, 0.87); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3188,6 +5025,117 @@ background: rgba(255, 255, 255, 0.03); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #BA68C8; border-radius: 50%; @@ -3213,6 +5161,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #304562; background: #1f2d40; @@ -3303,6 +5333,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3501,6 +5700,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #304562; @@ -3602,6 +5818,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 1px solid #304562; background: #1f2d40; @@ -3647,6 +5882,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2d40; } @@ -3671,6 +5967,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 1px solid #304562; padding: 1rem; @@ -3726,6 +6042,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; @@ -3738,6 +6110,66 @@ box-shadow: 0 0 0 1px #cf95d9; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #304562; background: #1f2d40; @@ -3762,6 +6194,76 @@ background: #304562; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #304562; @@ -3821,6 +6323,26 @@ border-bottom-left-radius: 3px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #1f2d40; border: 1px solid #304562; @@ -3832,6 +6354,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3880,6 +6472,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -3948,6 +6677,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3990,6 +6789,159 @@ border-top-color: #304562; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4033,6 +6985,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #304562; color: rgba(255, 255, 255, 0.87); @@ -4053,6 +7060,50 @@ border-bottom-color: #304562; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2d40; padding: 1rem; @@ -4117,6 +7168,38 @@ border-color: #a241b2; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #1f2d40; border: 1px solid #304562; @@ -4150,6 +7233,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #1f2d40; @@ -4244,6 +7369,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4311,6 +7542,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #1f2d40; @@ -4493,6 +7885,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.25rem 0; background: #1f2d40; @@ -4582,6 +7993,112 @@ margin: 0.25rem 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #1f2d40; @@ -4759,6 +8276,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4918,6 +8468,59 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -4964,6 +8567,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #304562; @@ -5005,6 +8648,55 @@ color: #BA68C8; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #1f2d40; @@ -5102,6 +8794,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5154,6 +8866,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5238,6 +8999,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5323,6 +9157,290 @@ color: #73000c; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5437,6 +9555,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5483,6 +9675,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #304562; border-radius: 3px; @@ -5508,6 +9739,39 @@ border: 2px solid #1f2d40; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #BA68C8; color: #ffffff; @@ -5550,10 +9814,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 3px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #304562; color: rgba(255, 255, 255, 0.87); @@ -5589,6 +9887,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -5605,6 +9921,43 @@ box-shadow: 0 0 0 1px #cf95d9; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5665,6 +10018,113 @@ border-bottom-right-radius: 3px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5681,6 +10141,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5726,6 +10212,67 @@ stroke: #6d5100; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5748,6 +10295,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5756,6 +10335,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #BA68C8; color: #ffffff; @@ -5791,6 +10386,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #1f2d40; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css index 4757c4539..9ea859022 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -303,6 +303,126 @@ } @layer primevue { + .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; } @@ -378,6 +498,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -470,6 +686,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f78c79; } @@ -704,6 +1070,96 @@ box-shadow: 0 0 0 1px #9eade6; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #0e1315; border: 2px solid #263238; @@ -794,6 +1250,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -879,6 +1352,52 @@ background: #7f93de; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #2d3e44; } @@ -921,6 +1440,14 @@ border-color: #f78c79; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -939,6 +1466,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #0e1315; border: 2px solid #263238; @@ -1067,6 +1689,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #161d21; color: rgba(255, 255, 255, 0.6); @@ -1137,6 +1845,107 @@ width: 2.857rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f78c79; } @@ -1150,6 +1959,30 @@ background-color: #263238; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1205,6 +2038,15 @@ border-color: #f78c79; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1318,6 +2160,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -1401,6 +2298,112 @@ border-color: #f78c79; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #0e1315; border: 2px solid #263238; @@ -1550,6 +2553,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f78c79; } @@ -1576,6 +2606,36 @@ background: #cede9c; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1660,6 +2720,22 @@ background: #7f93de; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1735,6 +2811,44 @@ border-color: #f78c79; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #263238; border: 0 none; @@ -1777,6 +2891,66 @@ border-color: #9eade6; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #0e1315; border: 2px solid #263238; @@ -1857,6 +3031,21 @@ background-color: #263238; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1920,6 +3109,74 @@ border-color: #f78c79; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #121212; background: #9eade6; @@ -2440,6 +3697,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2521,6 +3855,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2534,6 +3901,76 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2580,6 +4017,241 @@ color: #9eade6; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 2px 0; border-radius: 0; @@ -3003,6 +4675,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3075,6 +4785,59 @@ background: rgba(158, 173, 230, 0.08); } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(158, 173, 230, 0.08); color: rgba(255, 255, 255, 0.87); @@ -3115,6 +4878,46 @@ box-shadow: 0 0 0 1px #9eade6; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #161d21; color: rgba(255, 255, 255, 0.6); @@ -3197,6 +5000,40 @@ color: rgba(255, 255, 255, 0.87); } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3269,6 +5106,117 @@ background: rgba(158, 173, 230, 0.08); } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #9eade6; border-radius: 50%; @@ -3294,6 +5242,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 2px solid #263238; background: #161d21; @@ -3384,6 +5414,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 2px 0; border-radius: 0; @@ -3582,6 +5781,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 2px solid #263238; @@ -3683,6 +5899,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 2px solid #263238; background: #161d21; @@ -3728,6 +5963,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #161d21; } @@ -3752,6 +6048,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 2px solid #263238; padding: 1rem; @@ -3807,6 +6123,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #263238; border: 0 none; @@ -3819,6 +6191,66 @@ box-shadow: 0 0 0 1px #9eade6; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 2px solid #263238; background: #161d21; @@ -3843,6 +6275,76 @@ background: #263238; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #263238; @@ -3902,6 +6404,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #161d21; border: 2px solid #263238; @@ -3913,6 +6435,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -3961,6 +6553,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4029,6 +6758,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -4071,6 +6870,159 @@ border-top-color: #263238; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -4114,6 +7066,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #263238; color: rgba(255, 255, 255, 0.87); @@ -4134,6 +7141,50 @@ border-bottom-color: #263238; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #161d21; padding: 1rem; @@ -4198,6 +7249,38 @@ border-color: #7f93de; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #161d21; border: 2px solid #263238; @@ -4231,6 +7314,48 @@ color: rgba(255, 255, 255, 0.6); } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0.5rem; background: #161d21; @@ -4325,6 +7450,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4392,6 +7623,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #161d21; @@ -4574,6 +7966,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0.5rem; background: #161d21; @@ -4663,6 +8074,112 @@ margin: 4px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #161d21; @@ -4840,6 +8357,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4999,6 +8549,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.3s; @@ -5045,6 +8648,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #263238; @@ -5086,6 +8729,55 @@ color: #9eade6; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0.5rem; background: #161d21; @@ -5183,6 +8875,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5235,6 +8947,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5319,6 +9080,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5404,6 +9238,290 @@ color: #0e1315; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5518,6 +9636,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5564,6 +9756,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #263238; border-radius: 6px; @@ -5589,6 +9820,39 @@ border: 2px solid #161d21; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #9eade6; color: #121212; @@ -5631,10 +9895,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #263238; color: rgba(255, 255, 255, 0.87); @@ -5670,6 +9968,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5686,6 +10002,43 @@ box-shadow: 0 0 0 1px #9eade6; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5746,6 +10099,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5762,6 +10222,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5807,6 +10293,67 @@ stroke: #0e1315; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5829,6 +10376,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5837,6 +10416,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #9eade6; color: #121212; @@ -5872,6 +10467,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #161d21; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index 0f1547edb..cab1ff908 100644 --- a/public/themes/viva-light/theme.css +++ b/public/themes/viva-light/theme.css @@ -303,6 +303,126 @@ } @layer primevue { + .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; } @@ -378,6 +498,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } + + .p-autocomplete-dd .p-autocomplete-input, +.p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } + + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-autocomplete-token-icon { + cursor: pointer; + } + + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -470,6 +686,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, +.p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, +.p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f88c79; } @@ -704,6 +1070,96 @@ box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { background: #ffffff; border: 2px solid #e1e1e1; @@ -794,6 +1250,23 @@ font-size: 0.875rem; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { width: 20px; height: 20px; @@ -879,6 +1352,52 @@ background: #3c5ece; } + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #cecece; } @@ -921,6 +1440,14 @@ border-color: #f88c79; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -939,6 +1466,101 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .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; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } + .p-dropdown { background: #ffffff; border: 2px solid #e1e1e1; @@ -1067,6 +1689,92 @@ background: transparent; } + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -0.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -0.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } + + .p-input-icon-left, +.p-input-icon-right { + position: relative; + } + + .p-input-icon-left > i, +.p-input-icon-left > svg, +.p-input-icon-right > i, +.p-input-icon-right > svg { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + } + + .p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; + } + + .p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; + } + .p-inputgroup-addon { background: #f5f5f5; color: #898989; @@ -1137,6 +1845,107 @@ width: 2.857rem; } + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, +.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f88c79; } @@ -1150,6 +1959,30 @@ background-color: #f2f2f2; } + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + cursor: pointer; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1205,6 +2038,15 @@ border-color: #f88c79; } + .p-fluid .p-inputtext { + width: 100%; + } + + .p-fluid .p-input-icon-left, +.p-fluid .p-input-icon-right { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1318,6 +2160,61 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } + .p-listbox { background: #ffffff; color: #6c6c6c; @@ -1401,6 +2298,112 @@ border-color: #f88c79; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } + .p-multiselect { background: #ffffff; border: 2px solid #e1e1e1; @@ -1550,6 +2553,33 @@ background: transparent; } + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; + } + .p-password.p-invalid.p-component > .p-inputtext { border-color: #f88c79; } @@ -1576,6 +2606,36 @@ background: #8bae2c; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-input { + cursor: pointer; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } + .p-radiobutton { width: 20px; height: 20px; @@ -1660,6 +2720,22 @@ background: #3c5ece; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } + .p-rating { gap: 0.5rem; } @@ -1735,6 +2811,44 @@ border-color: #f88c79; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } + .p-slider { background: #ebebeb; border: 0 none; @@ -1777,6 +2891,66 @@ border-color: #5472d4; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 2px solid #e1e1e1; @@ -1857,6 +3031,21 @@ background-color: #f2f2f2; } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-togglebutton-input { + cursor: pointer; + } + + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { appearance: none; position: absolute; @@ -1920,6 +3109,74 @@ border-color: #f88c79; } + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; + } + + .p-button-label { + flex: 1 1 auto; + } + + .p-button-icon-right { + order: 1; + } + + .p-button:disabled { + cursor: default; + } + + .p-button-icon-only { + justify-content: center; + } + + .p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; + flex: 0 0 auto; + } + + .p-button-vertical { + flex-direction: column; + } + + .p-button-icon-bottom { + order: 2; + } + + .p-buttonset .p-button { + margin: 0; + } + + .p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover { + border-right: 0 none; + } + + .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .p-buttonset .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-buttonset .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-buttonset .p-button:focus { + position: relative; + z-index: 1; + } + .p-button { color: #ffffff; background: #5472d4; @@ -2440,6 +3697,83 @@ border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; + } + + .p-speeddial-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2521,6 +3855,39 @@ border-radius: 6px; } + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, +.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } + .p-splitbutton { border-radius: 6px; } @@ -2534,6 +3901,76 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { width: 2rem; @@ -2580,6 +4017,241 @@ color: #585858; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, +.p-datatable .p-sortable-column .p-sortable-column-icon, +.p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, +.p-datatable .p-row-editor-save, +.p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, +.p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, +.p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, +.p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, +.p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, +.p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 2px 0; border-radius: 0; @@ -3003,6 +4675,44 @@ padding: 1rem; } + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, +.p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3075,6 +4785,59 @@ background: #edf0fA; } + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #edf0fA; color: #6c6c6c; @@ -3115,6 +4878,46 @@ box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev, +.p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } + .p-paginator { background: #ffffff; color: #898989; @@ -3197,6 +5000,40 @@ color: #6c6c6c; } + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3269,6 +5106,117 @@ background: #edf0fA; } + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .p-timeline-left .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-left .p-timeline-event-content { + text-align: left; + } + + .p-timeline-right .p-timeline-event { + flex-direction: row-reverse; + } + + .p-timeline-right .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-right .p-timeline-event-content { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: row-reverse; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite { + text-align: right; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite { + text-align: left; + } + + .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content { + text-align: right; + } + + .p-timeline-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .p-timeline-horizontal { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; + } + + .p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; + } + + .p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; + } + + .p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #5472d4; border-radius: 50%; @@ -3294,6 +5242,88 @@ height: 2px; } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 2px solid #ebebeb; background: #ffffff; @@ -3384,6 +5414,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, +.p-treetable-resizable .p-treetable-tfoot > tr > td, +.p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 2px 0; border-radius: 0; @@ -3582,6 +5781,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 2px solid #ebebeb; @@ -3683,6 +5899,25 @@ padding: 1rem 0 0 0; } + .p-fieldset-legend > a, +.p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } + .p-fieldset { border: 2px solid #ebebeb; background: #ffffff; @@ -3728,6 +5963,67 @@ padding: 1rem; } + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3752,6 +6048,26 @@ padding: 0.5rem 0; } + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + .p-panel .p-panel-header { border: 2px solid #ebebeb; padding: 1rem; @@ -3807,6 +6123,62 @@ border-top: 0 none; } + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f5f5f5; border: 0 none; @@ -3819,6 +6191,66 @@ box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 2px solid #ebebeb; background: #ffffff; @@ -3843,6 +6275,76 @@ background: #ebebeb; } + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } + .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #ebebeb; @@ -3902,6 +6404,26 @@ border-bottom-left-radius: 6px; } + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, +.p-toolbar-group-center, +.p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, +.p-toolbar-group-right { + display: flex; + align-items: center; + } + .p-toolbar { background: #ffffff; border: 2px solid #ebebeb; @@ -3913,6 +6435,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } + .p-confirm-popup { background: #ffffff; color: #6c6c6c; @@ -3961,6 +6553,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4029,6 +6758,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, +.p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, +.p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } + .p-overlaypanel { background: #ffffff; color: #6c6c6c; @@ -4071,6 +6870,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, +.p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, +.p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, +.p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, +.p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, +.p-sidebar-right .p-sidebar-content, +.p-sidebar-top .p-sidebar-content, +.p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, +.p-sidebar-left .p-sidebar-md, +.p-sidebar-right .p-sidebar-lg, +.p-sidebar-right .p-sidebar-md { + width: 20rem; + } + } .p-sidebar { background: #ffffff; color: #6c6c6c; @@ -4114,6 +7066,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #585858; color: #ffffff; @@ -4134,6 +7141,50 @@ border-bottom-color: #585858; } + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1rem; @@ -4198,6 +7249,38 @@ border-color: #3c5ece; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } + .p-breadcrumb { background: #ffffff; border: 2px solid #ebebeb; @@ -4231,6 +7314,48 @@ color: #898989; } + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4325,6 +7450,112 @@ height: 0.875rem; } + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-list-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4392,6 +7623,167 @@ margin: 0; } + .p-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f5f5f5; @@ -4574,6 +7966,25 @@ padding-left: 2.25rem; } + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } + .p-menu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4663,6 +8074,112 @@ margin: 4px 0; } + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f5f5f5; @@ -4840,6 +8357,39 @@ padding-left: 8.25rem; } + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4999,6 +8549,59 @@ border-bottom-left-radius: 6px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.3s; @@ -5045,6 +8648,46 @@ margin-top: -1rem; } + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #ebebeb; @@ -5086,6 +8729,55 @@ color: #5472d4; } + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -5183,6 +8875,26 @@ height: 0.875rem; } + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon { + flex-shrink: 0; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5235,6 +8947,55 @@ margin-right: 0; } + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5319,6 +9080,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .p-toast-top-center { + transform: translateX(-50%); + } + + .p-toast-bottom-center { + transform: translateX(-50%); + } + + .p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); + } + + .p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5404,6 +9238,290 @@ color: #585858; } + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, +.p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, +.p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, +.p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, +.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, +.p-galleria-thumbnails-right .p-galleria-thumbnail-container { + flex-direction: column; + flex-grow: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, +.p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, +.p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, +.p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + z-index: 1; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active .p-galleria-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5518,6 +9636,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + line-height: 0; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: none; + padding: 0; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5564,6 +9756,45 @@ height: 1.5rem; } + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #ebebeb; border-radius: 6px; @@ -5589,6 +9820,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 0.5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #5472d4; color: #ffffff; @@ -5631,10 +9895,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + .p-blockui { border-radius: 6px; } + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #ebebeb; color: #6c6c6c; @@ -5670,6 +9968,24 @@ outline: 0 none; } + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -5686,6 +10002,43 @@ box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + .p-metergroup { gap: 1rem; } @@ -5746,6 +10099,113 @@ border-bottom-right-radius: 6px; } + .p-progressbar { + position: relative; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; + } + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; + } + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; + } + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } + } + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5762,6 +10222,32 @@ line-height: 1.5rem; } + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ""; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5807,6 +10293,67 @@ stroke: #585858; } } + .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); + } + } + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5829,6 +10376,38 @@ height: 1.5rem; } + .p-skeleton { + overflow: hidden; + } + + .p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #ebebeb; border-radius: 6px; @@ -5837,6 +10416,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, +.p-tag-value, +.p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + .p-tag { background: #5472d4; color: #ffffff; @@ -5872,6 +10467,29 @@ height: 0.75rem; } + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } + .p-terminal { background: #ffffff; color: #6c6c6c;