diff --git a/assets/css/scss/atoms/_autocomplete.scss b/assets/css/scss/atoms/_autocomplete.scss index 0128bc91576..a9a856029bc 100644 --- a/assets/css/scss/atoms/_autocomplete.scss +++ b/assets/css/scss/atoms/_autocomplete.scss @@ -1,130 +1,139 @@ .p-autocomplete { - @apply flex; + @apply inline-flex; &-loader { @apply absolute top-1/2 -mt-2 right-3; } - &-dd &-input { + &:has(&-dropdown) &-loader { + @apply pr-7; + } + + &:has(&-dropdown) &-input { @apply flex-auto w-[1%]; } - &-dd &-input, - &-dd &-multiple-container { + &:has(&-dropdown) &-input, + &:has(&-dropdown) &-input-multiple { @apply rounded-r-lg; } - &-dd &-dropdown { - @apply rounded-l-lg; + &-dropdown { + @apply cursor-pointer inline-flex select-none items-center justify-center overflow-hidden relative w-full bg-white transition-colors outline-none rounded-l-lg + focus-visible:outline-none; + + &:not(:disabled) { + @apply + hover:bg-support-1 + active:bg-support-1 + focus:bg-support-1; + } } - & &-panel { + & &-overlay { @apply min-w-full; } - &-panel { - @apply absolute overflow-auto top-0 left-0 bg-white drop-shadow-lg rounded-lg border-none text-gray-90 + &-overlay { + @apply absolute overflow-auto top-0 left-0 bg-white drop-shadow-lg rounded-lg border-none text-gray-90 mt-1 before:content-[""] before:w-full before:block before:h-3 before:sticky before:bg-white before:z-[2] before:top-0 before:rounded-t-lg before:rounded-b-none after:content-[""] after:w-full after:block after:h-3 after:sticky after:bg-white after:z-[2] after:bottom-0 after:rounded-b-lg after:rounded-t-none; + } - .p-autocomplete-items { - @apply p-0; - - .p-autocomplete-item { - @apply m-0 px-4 py-2 transition text-body-2 outline-0 outline-none text-gray-90 border-none bg-transparent rounded-none; + &-list-container { + @apply overflow-auto; + } - &:first-child { - @apply mt-0; - } + &-list { + @apply m-0 p-0 list-none flex flex-col gap-0; + } - &:last-child { - @apply mb-0; - } + &-option { + @apply cursor-pointer whitespace-nowrap relative overflow-hidden flex items-center border-0 text-gray-90 text-body-2 transition-colors px-4 py-2; + } - &.p-highlight { - @apply bg-support-3 text-primary; - } + &-option:not(&-option-selected):not(.p-disabled).p-focus { + @apply text-primary bg-white; + } - &:not(.p-highlight):not(.p-disabled).p-focus { - @apply text-primary; - } + &-option-selected { + @apply text-primary bg-support-1; - &-group { - @apply m-0 px-3 py-4 bg-white text-gray-90; - } - } + &.p-focus { + @apply text-primary bg-support-1; } } - &-items { - @apply m-0 p-0 list-none; + &-option-group { + @apply m-0 px-3 py-4 bg-white text-gray-90; } - &-item { - @apply cursor-pointer whitespace-nowrap relative overflow-hidden; + &-input-multiple { + @apply m-0 px-3 py-2 list-none cursor-text overflow-hidden flex items-center flex-wrap gap-2 outline-transparent transition-colors w-full border border-solid border-gray-50 rounded-lg; } - &-multiple-container { - @apply m-0 p-3 list-none cursor-text overflow-hidden flex items-center flex-wrap gap-2 outline-transparent; + &:not(.p-disabled):hover &-input-multiple { + @apply border-primary; + } - .p-autocomplete-input-token { - @apply p-0; + &:not(.p-disabled).p-focus &-input-multiple { + @apply border-primary outline-none; + } - input { - @apply p-0 m-0 text-gray-90; - } - } + &.p-invalid &-input-multiple { + @apply border-danger; + } - .p-autocomplete-token { - @apply px-1.5 py-0 rounded-lg text-gray-90 bg-gray-20; + &.p-disabled &-input-multiple { + @apply opacity-100 border-gray-50 text-gray-50; + } - .p-autocomplete-token-icon { - @apply ml-2; - } + &-chip.p-chip { - &.p-focus { - @apply text-primary; - } - } } - &-token { - @apply cursor-default inline-flex items-center flex-initial; + &-input-multiple:has(&-chip) { - &-icon { - @apply cursor-pointer inline-flex; - } } - &-input-token { - @apply flex-1 inline-flex; + &-chip-item.p-focus &-chip { + @apply p-0; + } + + &-input-chip { + @apply flex-auto inline-flex p-0; input { - @apply border-none outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full; + @apply border-none outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full + placeholder:text-gray-50; } } - &.p-autocomplete-dd { - &.p-autocomplete-loader { - @apply right-[3.75rem]; - } + &.p-invalid &-input-chip input { + @apply placeholder:text-danger; } - &:not(.p-disabled) { - &:hover { - .p-autocomplete-multiple-container { - @apply border-primary; - } - } + &-empty-message { + @apply px-4 py-2; + } + + &-fluid { + @apply flex; + } + + &-fluid:has(&-dropdown) &-input { + @apply w-[1%]; + } + + &:has(.p-inputtext-sm) &-dropdown { + .p-icon { - &.p-focus { - .p-autocomplete-multiple-container { - @apply outline-none outline-offset-0 border-primary; - } } } - &.p-invalid.p-component > .p-inputtext { - @apply border-error; + &:has(.p-inputtext-lg) &-dropdown { + .p-icon { + + } } } diff --git a/assets/css/scss/atoms/_calendar.scss b/assets/css/scss/atoms/_calendar.scss index fb3dd0a0e0f..42c47de1d2a 100644 --- a/assets/css/scss/atoms/_calendar.scss +++ b/assets/css/scss/atoms/_calendar.scss @@ -1,11 +1,191 @@ -.p-calendar { - @apply flex; +.p-datepicker { + @apply inline-flex max-w-full; - .p-inputtext { - @apply rounded-r-none; + &-input { + @apply flex-auto w-[1%]; } - .p-button { - @apply rounded-l-none; + &:has(&-dropdown) &-input { + @apply rounded-r-lg; + } + + &-dropdown { + @apply cursor-pointer inline-flex select-none items-center justify-center overflow-hidden relative w-full bg-white transition-colors outline-none rounded-l-lg + focus-visible:outline-none; + + &:not(:disabled) { + @apply + hover:bg-support-1 + active:bg-support-1 + focus:bg-support-1; + } + } + + &:has(&-input-icon-container) { + @apply relative; + } + + &:has(&-input-icon-container) &-input { + @apply pr-12; + } + + &-input-icon-container { + @apply cursor-pointer absolute top-3 right-4 text-gray-90; + + .p-icon { + @apply w-4 h-4 text-body-1 leading-none; + } + } + + &-fluid { + @apply flex; + } + + &-fluid &-input { + @apply w-[1%]; + } + + & &-panel { + @apply min-w-full; + } + + &-panel { + @apply w-auto absolute bg-white drop-shadow-lg rounded-lg border-none text-gray-90 mt-1 p-0 + before:content-[""] before:w-full before:block before:h-3 before:sticky before:bg-white before:z-[2] before:top-0 before:rounded-t-lg before:rounded-b-none + after:content-[""] after:w-full after:block after:h-3 after:sticky after:bg-white after:z-[2] after:bottom-0 after:rounded-b-lg after:rounded-t-none; + } + + &-panel-inline { + @apply inline-block overflow-x-auto drop-shadow-none; + } + + &-header { + @apply flex items-center justify-between p-0 text-gray-90; + } + + &-next-button { + @apply rtl:-order-1; + } + + &-prev-button { + @apply rtl:order-1; + } + + &-title { + @apply flex items-center justify-between gap-2 font-semibold; + } + + &-select-year, + &-select-month { + @apply border-none bg-transparent m-0 cursor-pointer transition-colors text-gray-90 px-2 py-0 + enabled:text-primary + hover:text-primary + focus-visible:text-primary focus-visible:outline-none; + } + + &-calendar-container { + @apply flex px-4; + } + + &-calendar-container &-calendar { + @apply flex-auto border-0 p-0; + } + + &-day-view { + @apply w-full border-collapse text-base m-0; + } + + &-weekday { + @apply font-semibold text-gray-90; + } + + &-day-cell { + @apply p-2; + } + + &-day { + @apply flex justify-center items-center cursor-pointer mx-auto my-0 overflow-hidden relative w-7 h-7 border-0 rounded-lg text-gray-90 text-body-2 transition-colors outline-none + focus-visible:outline-none; + + .p-datepicker-today > & { + @apply font-semibold; + } + + &-selected, + &-selected-range { + @apply bg-support-1 text-primary; + + .p-datepicker-today > & { + } + } + } + + &-day:not(.p-disabled):not(&-day-selected), + &-month:not(.p-disabled):not(&-month-selected), + &-year:not(.p-disabled):not(&-year-selected) { + @apply hover:bg-support-1; + } + + &-weeknumber { + @apply font-semibold text-secondary text-center; + } + + &-month-view, + &-year-view, + &-time-picker { + @apply mx-4; + } + + &-month, + &-year{ + @apply w-1/3 h-7 inline-flex items-center justify-center cursor-pointer overflow-hidden relative p-0 transition-colors rounded-lg outline-none text-gray-90 text-body-2; + + &-selected { + @apply bg-support-1 text-primary; + } + } + + &-month:not(.p-disabled), + &-year:not(.p-disabled) { + @apply focus-visible:outline-none; + } + + &-buttonbar { + @apply flex justify-between items-center p-2; + + .p-button { + @apply w-auto; + } + } + + &-time-picker { + @apply flex justify-center items-center gap-4; + + & > div { + @apply flex items-center flex-col gap-1; + } + + span { + @apply text-body-2; + } + + .p-timepicker-only & { + } + } + + &:has(.p-inputtext-sm) &-dropdown { + .p-icon { + } + } + + &:has(.p-inputtext-sm) &-input-icon { + } + + &:has(.p-inputtext-lg) &-dropdown { + .p-icon { + } + } + + &:has(.p-inputtext-lg) &-input-icon { } } diff --git a/assets/css/scss/atoms/_checkbox.scss b/assets/css/scss/atoms/_checkbox.scss index c38ee087cd4..4c0affd9b9d 100644 --- a/assets/css/scss/atoms/_checkbox.scss +++ b/assets/css/scss/atoms/_checkbox.scss @@ -1,53 +1,87 @@ .p-checkbox { - @apply relative inline-flex select-none align-bottom h-4 w-4; + @apply relative inline-flex select-none align-bottom w-4 h-4; &-input { - @apply cursor-pointer; + @apply cursor-pointer appearance-none absolute start-0 w-full h-full p-0 m-0 opacity-0 z-[1] outline-none outline-0 border border-transparent rounded-full; } &-box { - @apply flex justify-center items-center; - } + @apply flex justify-center items-center rounded border border-gray-50 w-4 h-4 transition outline-transparent; + + .p-checkbox-checked & { + @apply border-gray-50 bg-white; + } + + .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) & { + @apply border-primary bg-white; + } + + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) & { + @apply border-primary drop-shadow-lg outline-none outline-0 + } - & &-input { - @apply appearance-none absolute top-0 left-0 w-full h-full p-0 m-0 opacity-0 z-[1] outline-none border-2 border-support-3 rounded; + .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:focus-visible) & { + @apply border-primary; + } + + .p-checkbox.p-variant-filled & { } + + .p-checkbox-checked.p-variant-filled & {} + + .p-checkbox-checked.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) & { } } - & &-box { - @apply border-2 border-support-3 bg-white w-4 h-4 text-primary rounded transition-none outline-none; + &-icon { + @apply duration-200 text-gray-90 text-body-2 w-3 h-3; - .p-checkbox-icon { - @apply duration-200 text-white text-tiny; + .p-checkbox-checked & { + @apply text-gray-90; + } - &.p-icon { - @apply w-2.5 h-2.5; + .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) & { + @apply text-primary; + } + } + + &:not(.p-disabled) { + &:has(.p-checkbox-input:hover) { + .p-checkbox-box { + @apply border-primary; } } } - &:has(&-input--legacy:checked) &-box, - &.p-highlight &-box { - @apply border-primary bg-primary; + &.p-invalid > & { + @apply border-danger; } - &:not(.p-disabled):has(&-input:hover) { - .p-checkbox-box { - @apply border-primary; - } + &.p-disabled { + @apply opacity-100; + + & .p-checkbox-box { + @apply border-gray-50 bg-gray-20; - &:has(.p-checkbox-input--legacy:checked) .p-checkbox-box, - &.p-highlight .p-checkbox-box { - @apply border-primary bg-primary text-white; + .p-checkbox-icon { + @apply text-gray-50; + } } } - &:not(.p-disabled):has(&-input:focus-visible) { - .p-checkbox-box { - @apply outline-none drop-shadow-lg bg-primary; - } + &-sm, + &-sm &-box { + @apply w-2 h-2; + } + + &-sm &-icon { + @apply text-body-2 w-2 h-2; + } + + &-lg, + &-lg &-box { + @apply w-6 h-6; } - &.p-invalid > &-box { - @apply border-error; + &-lg &-icon { + @apply text-body-2 w-5 h-5; } } diff --git a/assets/css/scss/atoms/_dropdown.scss b/assets/css/scss/atoms/_dropdown.scss deleted file mode 100644 index 3bc7ebbac8e..00000000000 --- a/assets/css/scss/atoms/_dropdown.scss +++ /dev/null @@ -1,85 +0,0 @@ -.p-dropdown, .p-multiselect { - @apply inline-flex cursor-pointer relative select-none - border border-support-3 bg-white rounded-lg transition w-full duration-200 - hover:border-primary hover:text-gray-90 hover:outline-0 hover:outline-none - focus:border-primary focus:text-gray-90 focus:outline-0 focus:outline-none; - - font-size: 14px; - - .p-dropdown-panel, .p-multiselect-panel { - @apply min-w-full; - } - - &.p-invalid.p-component { - @apply border-error text-error; - } -} - -select.p-dropdown { - @apply px-4 py-2; -} - -.p-dropdown { - &-clear-icon { - @apply absolute top-1/2 -mt-2; - } - - & &-clear-icon { - @apply right-12; - } -} - -.p-dropdown-trigger { - @apply flex items-center justify-center flex-shrink-0 - bg-transparent rounded-r-lg w-9; -} - -.p-dropdown-label, .p-multiselect-label { - @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%] overflow-ellipsis cursor-pointer - bg-transparent border-none - focus:outline-0 focus:outline-none; -} - -.p-dropdown-label-empty { - @apply overflow-hidden opacity-0; -} - -.p-dropdown-panel, .p-multiselect-panel { - @apply absolute min-w-full top-2 left-0 - bg-white rounded-lg text-gray-90 drop-shadow-lg; - - .p-dropdown-items { - @apply rounded-lg - before:content-[""] before:w-full before:block before:h-3 before:sticky before:bg-white before:z-[2] before:top-0 before:rounded-t-lg before:rounded-b-none - after:content-[""] after:w-full after:block after:h-3 after:sticky after:bg-white after:z-[2] after:bottom-0 after:rounded-b-lg after:rounded-t-none; - - .p-dropdown-item { - @apply px-4 py-2 transition text-body-2 outline-0 outline-none text-gray-90; - - &.p-highlight { - @apply bg-support-3 text-primary; - } - - &.p-focus { - @apply text-primary; - } - } - } -} - -.p-dropdown-items-wrapper { - @apply overflow-auto rounded-lg; -} - -.p-dropdown-item { - @apply cursor-pointer whitespace-nowrap relative overflow-hidden flex items-center; -} - -.p-dropdown-items { - @apply m-0 p-0 list-none; -} - -.p-multiselect-label-container { - @apply p-2; -} - diff --git a/assets/css/scss/atoms/_float_label.scss b/assets/css/scss/atoms/_float_label.scss new file mode 100644 index 00000000000..c58182421fe --- /dev/null +++ b/assets/css/scss/atoms/_float_label.scss @@ -0,0 +1,65 @@ +.p-floatlabel { + @apply block relative; + + label { + @apply absolute top-1/2 pointer-events-none leading-none left-4 text-gray-50 bg-transparent transition-all duration-200; + } + + &:has(.p-textarea) label { + } + + &:has(.p-inputicon:first-child) label { + } + + &:has(.p-invalid) label { + @apply text-danger; + } + + &:has(input:focus) label, + &:has(input.p-filled) label, + &:has(input:-webkit-autofill) label, + &:has(textarea:focus) label, + &:has(textarea.p-filled) label, + &:has(.p-inputwrapper-focus) label, + &:has(.p-inputwrapper-filled) label { + @apply top-0 left-2 text-caption px-1 bg-white text-primary z-[1]; + } + + &:has(input.p-filled) label, + &:has(textarea.p-filled) label, + &:has(.p-inputwrapper-filled) label { + } + + &:has(input:focus) label, + &:has(input:-webkit-autofill) label, + &:has(textarea:focus) label, + &:has(.p-inputwrapper-focus) label { + } + + &-in .p-inputtext, + &-in .p-textarea, + &-in .p-select-label, + &-in .p-multiselect-label, + &-in .p-autocomplete-input-multiple, + &-in .p-cascadeselect-label, + &-in .p-treeselect-label { + } + + &-in:has(input:focus) label, + &-in:has(input.p-filled) label, + &-in:has(input:-webkit-autofill) label, + &-in:has(textarea:focus) label, + &-in:has(textarea.p-filled) label, + &-in:has(.p-inputwrapper-focus) label, + &-in:has(.p-inputwrapper-filled) label { + } + + &-on:has(input:focus) label, + &-on:has(input.p-filled) label, + &-on:has(input:-webkit-autofill) label, + &-on:has(textarea:focus) label, + &-on:has(textarea.p-filled) label, + &-on:has(.p-inputwrapper-focus) label, + &-on:has(.p-inputwrapper-filled) label { + } +} diff --git a/assets/css/scss/atoms/_input_switch.scss b/assets/css/scss/atoms/_input_switch.scss index f32cc52f384..d0b69ea62eb 100644 --- a/assets/css/scss/atoms/_input_switch.scss +++ b/assets/css/scss/atoms/_input_switch.scss @@ -1,47 +1,51 @@ -.p-inputswitch { - @apply align-middle h-4 w-8; +.p-toggleswitch { + @apply inline-block w-8 h-4; - .p-inputswitch-input { - @apply appearance-none absolute top-0 left-0 w-full h-full p-0 m-0 opacity-0 z-[1] outline-0 outline-none rounded-full; + &-input { + @apply cursor-pointer appearance-none absolute top-0 start-0 w-full h-full p-0 m-0 opacity-0 z-[1] outline-0 outline-none rounded-full; } - .p-inputswitch-slider { - @apply bg-gray-30 rounded-full transition-none outline-transparent - before:bg-white before:duration-200 before:h-3 before:left-0.5 before:-mt-1.5 before:rounded-full before:w-3; - } + &-slider { + @apply cursor-pointer w-full h-full border-0 border-none bg-gray-30 transition rounded-full drop-shadow-none; - &.p-highlight .p-inputswitch-slider { - @apply bg-secondary - before:bg-white before:translate-x-4; - } + .p-toggleswitch.p-toggleswitch-checked & { + @apply bg-secondary; + } - &:not(.p-disabled) { - &:has(.p-inputswitch-input:hover) { - .p-inputswitch-slider { - @apply bg-gray-30; - } + .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) & { + @apply bg-gray-50; + } - &.p-highlight .p-inputswitch-slider { - @apply bg-secondary; - } + .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked & { + @apply bg-secondary; } - &:has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { - @apply outline-0 outline-none outline-offset-0 shadow-lg; + .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) & { + @apply outline-none outline-0; } - } - &.p-invalid > .p-inputswitch-slider { - @apply border-error; + .p-toggleswitch.p-disabled & { } + + .p-toggleswitch.p-invalid > & { + @apply border border-solid border-danger; + } } -} -.p-inputswitch-input { - @apply cursor-pointer; -} + &-handle { + @apply absolute flex justify-center items-center bg-white text-gray-90 h-3 w-3 top-0.5 left-0.5 rounded-full transition-colors; -.p-inputswitch-slider { - @apply absolute cursor-pointer top-0 left-0 right-0 bottom-0 border border-transparent - before:absolute before:content-[""] before:top-1/2; -} + .p-toggleswitch.p-toggleswitch-checked & { + @apply translate-x-4; + } + + .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) & { } + + .p-toggleswitch.p-disabled & { } + .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked & { } + } + + &.p-disabled { + @apply opacity-100; + } +} diff --git a/assets/css/scss/atoms/_input_text.scss b/assets/css/scss/atoms/_input_text.scss index 40786f248fc..5254686e693 100644 --- a/assets/css/scss/atoms/_input_text.scss +++ b/assets/css/scss/atoms/_input_text.scss @@ -1,78 +1,46 @@ .p-inputtext { - @apply border border-support-3 px-4 py-2 bg-white rounded-lg text-gray-90 transition w-full duration-200 appearance-none font-sans - placeholder:text-support-3 - hover:border-primary hover:text-gray-90 hover:outline-0 hover:ring-0 - focus:border-primary focus:text-gray-90 focus:outline-0 focus:ring-0; + @apply text-body-2 text-gray-90 bg-white px-3 py-2.5 border border-solid border-gray-50 transition-colors appearance-none rounded-lg outline-transparent w-full; - font-size: 14px; - - &.p-invalid.p-component { - @apply border-error - placeholder:text-error; + &:enabled { + @apply hover:border-primary + focus:border-primary focus:outline-0 focus:outline-none; } - &.p-inputtext-sm { - @apply px-3 py-1.5 text-body-2; - } + &.p-invalid { + @apply border-danger; - &.p-inputtext-lg { - @apply py-3; + &::placeholder { + @apply text-danger; + } } -} -.p-icon-field { - @apply relative; + &.p-variant-filled { + @apply bg-support-1; - > .p-input-icon { - @apply absolute top-1/2 -mt-2; - } -} + &:enabled { } -.p-icon-field-left { - > .p-input-icon:first-of-type { - @apply left-3 text-primary; + &.p-filled { + @apply text-primary; + } } - > .p-inputtext { - @apply pl-9; + &:disabled { + @apply border-gray-50 text-gray-50; } -} -.p-icon-field-right { - > .p-input-icon:first-of-type { - @apply right-3 text-primary; + &::placeholder { + @apply text-gray-50; } - > .p-inputtext { - @apply pr-9; + &-sm { + @apply px-3 py-1.5; } -} -.p-input-icon-right { - > i:last-of-type, - > svg:last-of-type { - @apply right-3; + &-lg { + @apply py-3; } - > .p-inputtext { - @apply pr-10; + &-fluid { + @apply w-full } } - -.p-inputnumber { - @apply inline-flex; -} - -.p-inputnumber-input { - @apply flex-auto; -} - -.p-inputtextarea { - &-resizable { - @apply overflow-hidden resize-none; - } - - .p-fluid & { - @apply w-full; - } -} \ No newline at end of file diff --git a/assets/css/scss/atoms/_messages.scss b/assets/css/scss/atoms/_messages.scss index bb15065ef76..cb76e2a826c 100644 --- a/assets/css/scss/atoms/_messages.scss +++ b/assets/css/scss/atoms/_messages.scss @@ -1,38 +1,88 @@ .p-message { - @apply mb-4 shadow-sm rounded-md border-0; + @apply rounded-md outline-none outline-0; - &-wrapper { - @apply flex items-center; // gap-3.5; - } - - & &-wrapper { - @apply py-3 px-4; + &-content { + @apply flex items-center gap-4 py-3 px-4 h-full; } &-icon { - @apply shrink-0; + @apply shrink-0 text-body-1 w-6 h-6; } - & &-icon { - @apply text-body-1 mr-2; + &-close-button { + @apply flex items-center justify-center shrink-0 ms-auto overflow-hidden relative w-8 h-8 rounded-full bg-transparent transition outline-none cursor-pointer select-none; - &:not(.p-message-close-icon) { - @apply w-6 h-6; + &:focus-visible { + @apply outline-none outline-0; } + + .p-message-info & { } + + .p-message-success & { } + + .p-message-warn & { } + + .p-message-error & { } + + .p-message-secondary & { } + + .p-message-contrast & { } + } + + &-close-icon { + @apply text-body-2 w-6 h-6; } - &-close { - @apply flex items-center justify-center shrink-0; // rounded-full transition duration-200 min-w-[1rem] min-h-[1rem]; + &-info { + @apply bg-info text-white outline-none; - &.p-link { - @apply ml-auto overflow-hidden relative; - } + &.p-message-outlined { } + + &.p-message-simple { } } - & &-close { - @apply w-8 h-8 rounded-full bg-transparent transition-none outline-transparent - hover:bg-white/50 - focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:drop-shadow-lg; + &-success { + @apply bg-success text-white outline-none; + + &.p-message-outlined { } + + &.p-message-simple { } + } + + &-warn { + @apply bg-warning text-gray-90 outline-none; + + &.p-message-outlined { } + + &.p-message-simple { } + } + + &-error { + @apply bg-danger text-white outline-none; + + &.p-message-outlined { } + + &.p-message-simple { } + } + + &-secondary { + @apply bg-secondary text-white outline-none; + + &.p-message-outlined { } + + &.p-message-simple { } + } + + &-contrast { + @apply bg-gray-90 text-white outline-none; + + &.p-message-outlined { } + + &.p-message-simple { } + } + + &-text { + @apply text-body-2 font-normal; } &-enter-from { @@ -40,70 +90,70 @@ } &-enter-active { - @apply transition-opacity duration-300; + @apply transition-opacity duration-200; } &.p-message-leave-from { - @apply max-h-96; + @apply max-h-[1000px]; } - &.p-message-leave-to { + &.p-message-leave-from { @apply max-h-0 opacity-0 m-0; } &-leave-active { @apply overflow-hidden transition; - } - &-leave-active &-close { - @apply hidden; + & .p-message-close-button { + @apply opacity-0; + } } - & &-text { - @apply text-body-2 w-full; - - a { - @apply font-semibold; + &-sm { + & .p-message-content { + @apply p-2; } - } - .p-message-icon { - @apply leading-normal; - } + & .p-message-text { + @apply text-body-2; + } - &.p-message-info { - @apply bg-info text-white; + & .p-message-icon { + @apply text-body-1 w-4 h-4; + } - .p-message-icon, - .p-message-close { - @apply text-white; + &.p-message-close-icon { + @apply text-body-2 w-4 h-4; } } - &.p-message-success { - @apply bg-success text-white; + &-lg { + & .p-message-content { + @apply p-6; + } - .p-message-icon, - .p-message-close { - @apply text-white; + & .p-message-text { + @apply text-body-1; } - } - &.p-message-warn { - @apply bg-warning text-gray-90; + & .p-message-icon { + @apply text-h5 w-8 h-8; + } - .p-message-icon, - .p-message-close { - @apply text-gray-90; + &.p-message-close-icon { + @apply text-body-2 w-6 h-6; } } - &.p-message-error { - @apply bg-error text-white; + &-message-outlined { + @apply bg-transparent outline-none; + } + + &-simple { + @apply bg-transparent outline-none; - .p-message-icon, - .p-message-close { - @apply text-white; + & .p-message-content { + @apply p-0; } } } diff --git a/assets/css/scss/atoms/_password.scss b/assets/css/scss/atoms/_password.scss index 01d780066a2..ff0eb981a15 100644 --- a/assets/css/scss/atoms/_password.scss +++ b/assets/css/scss/atoms/_password.scss @@ -1,21 +1,56 @@ .p-password { - @apply inline-flex w-full; -} + @apply inline-flex relative w-full; -.p-password-input { - &::-ms-reveal, - &::-ms-clear { - @apply hidden; + & &-overlay { + @apply min-w-full; } -} -.p-float-label { - .p-password { - &.p-inputwrapper-filled, - &.p-inputwrapper-focus { - ~ label { - @apply top-0 text-primary text-caption; - } + &-meter { + @apply rounded-lg; + + &-label { + @apply h-full w-0 rounded-lg; + } + + &-weak { + @apply bg-danger; + } + + &-medium { + @apply bg-warning; + } + + &-strong { + @apply bg-success; } } + + &-fluid { + @apply flex; + + & .p-password-input { + @apply w-full; + } + } + + &-input::-ms-reveal, + &-input::-ms-clear { + display: none; + } + + &-overlay { + @apply p-4 bg-white text-gray-90 border-none border-0 outline-none outline-0 drop-shadow-lg rounded-lg; + } + + &-content { + @apply flex flex-col gap-4; + } + + &-toggle-mask-icon { + @apply inset-y-0 right-4 text-gray-90 absolute w-4 h-full; + } + + &:has(&-mask-icon) &-input { + @apply pr-4; + } } diff --git a/assets/css/scss/atoms/_radio.scss b/assets/css/scss/atoms/_radio.scss index cfa9ac244e9..8917e8cf5dd 100644 --- a/assets/css/scss/atoms/_radio.scss +++ b/assets/css/scss/atoms/_radio.scss @@ -2,41 +2,32 @@ @apply relative inline-flex select-none align-bottom w-4 h-4; &-input { - @apply cursor-pointer; + @apply cursor-pointer appearance-none absolute top-0 start-0 w-full h-full p-0 m-0 opacity-0 z-[1] outline-none outline-0 border-2 border-transparent rounded-full; } &-box { - @apply flex justify-center items-center; + @apply flex justify-center items-center rounded-full border border-gray-50 bg-white w-4 h-4 transition outline-transparent drop-shadow-none; } &-icon { - @apply rounded-full invisible; - -webkit-backface-visibility: hidden; + @apply duration-200 w-1.5 h-1.5 rounded-full transform-gpu; backface-visibility: hidden; - transform: translateZ(0) scale(0.1); } - &:has(&-input--legacy:checked) &-icon, - &.p-highlight &-icon { - @apply visible; - transform: translateZ(0) scale(1, 1); - } - - & &-input { - @apply appearance-none absolute top-0 left-0 w-full h-full p-0 m-0 opacity-0 z-[1] outline-none border-2 border-support-3; - } - - & &-box { - @apply border-2 border-support-3 bg-white w-4 h-4 text-primary rounded-full transition-none outline-none; + &:not(.p-disabled) { + &:has(.p-radiobutton-input:hover) { + .p-radiobutton-box { + @apply border-primary; + } + } } - & &-box &-icon { - @apply w-1.5 h-1.5 duration-200 bg-white; + &-checked &-box { + @apply border-gray-50 bg-white; } - &:has(&-input--legacy:checked) &-box, - &.p-highlight &-box { - @apply border-primary bg-primary; + &-checked &-box &-icon { + @apply bg-gray-90 transform-gpu visible; } &:not(.p-disabled):has(&-input:hover) { @@ -44,19 +35,70 @@ @apply border-primary; } - &:has(.p-radiobutton-input--legacy:checked) .p-radiobutton-box, - &.p-highlight .p-radiobutton-box { - @apply border-primary bg-primary text-white; + &.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon { + @apply bg-primary; } } - &:not(.p-disabled):has(&-input:focus-visible) { - .p-radiobutton-box { - @apply outline-none drop-shadow-lg bg-primary; + &-checked:not(.p-disabled) { + &:has(.p-radiobutton-input:hover) .p-radiobutton-box { + @apply border-primary bg-white; + } + + &:has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + @apply border-gray-50; } } - &.p-invalid > &-box { - @apply border-error; + &:not(.p-disabled):has(&-input:focus-visible) &-box { + @apply border-primary drop-shadow-lg outline-none outline-0; + } + + .p-radiobutton.p-invalid > .p-radiobutton-box { + @apply border-danger; + } + + &.p-variant-filled { + & .p-radiobutton-box { + @apply bg-white; + } + + &.p-radiobutton-checked .p-radiobutton-box { + @apply bg-white; + } + + &:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box { + @apply bg-white; + } + } + + &.p-disabled { + @apply opacity-100; + } + + &.p-disabled &-box { + @apply bg-gray-50 border-gray-50 + } + + &-checked.p-disabled &-box &-icon { + @apply bg-gray-50; + } + + &-sm, + &-sm &-box { + @apply w-2 h-2; + } + + &-sm &-icon { + @apply text-body-2 w-1.5 h-1.5; + } + + &-lg, + &-lg &-box { + @apply w-6 h-6; + } + + &-lg &-icon { + @apply text-body-2 w-4 h-4; } -} \ No newline at end of file +} diff --git a/assets/css/scss/atoms/_select.scss b/assets/css/scss/atoms/_select.scss new file mode 100644 index 00000000000..a94eed1bb0f --- /dev/null +++ b/assets/css/scss/atoms/_select.scss @@ -0,0 +1,132 @@ +.p-select { + @apply inline-flex cursor-pointer relative select-none bg-white border border-gray-50 transition rounded-lg outline-none shadow-none drop-shadow-none w-full; + + &:not(.p-disabled) { + @apply hover:border-primary hover:text-gray-90; + + &.p-focus { + @apply border-primary text-gray-90 outline-0 outline-none + } + } + + &.p-variant-filled { + &:not(.p-disabled) { + &:hover {} + + &.p-focus {} + } + } + + &.p-invalid { + @apply border-danger text-danger; + } + + &.p-disabled { + @apply bg-gray-25 opacity-60; + } + + &-clear-icon { + @apply absolute top-1/2 -mt-2; + } + + &-dropdown { + @apply flex items-center justify-center shrink-0 bg-transparent rounded-r-lg pr-4 py-2 text-gray-90 text-body-2; + + .p-select-sm & .p-icon {} + + .p-select-lg & .p-icon {} + } + + &-label { + @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%] px-4 py-3 overflow-ellipsis cursor-pointer text-gray-90 text-body-2 bg-transparent border-none border-0 outline-none outline-0; + + &.p-placeholder { + @apply text-gray-50; + + .p-select.p-invalid & {} + } + + .p-select:has(.p-select-clear-icon) & {} + + .p-select.p-disabled & { + @apply text-gray-50; + } + + &-empty { + @apply overflow-hidden opacity-0; + } + + .p-select-sm & { + } + + .p-select-lg & {} + } + + input.p-select-label { + @apply cursor-default; + } + + & &-overlay { + @apply cursor-default; + } + + &-overlay { + @apply absolute top-0 left-0 mt-2 bg-white text-gray-90 border-0 border-none rounded-lg drop-shadow-lg; + } + + &-header {} + + &-filter { + @apply w-full; + } + + &-list-container { + @apply overflow-auto; + } + + &-option-group { + + } + + &-list { + @apply m-0 p-0 list-none gap-0 flex flex-col + before:content-[""] before:w-full before:block before:h-3 before:sticky before:bg-white before:z-[2] before:top-0 before:rounded-t-lg before:rounded-b-none + after:content-[""] after:w-full after:block after:h-3 after:sticky after:bg-white after:z-[2] after:bottom-0 after:rounded-b-lg after:rounded-t-none; + } + + &-option { + @apply cursor-pointer text-body-2 whitespace-nowrap relative overflow-hidden flex items-center px-4 py-2 border-0 border-none text-gray-90 transition; + + &:not(.p-select-option-selected):not(.p-disabled).p-focus { + @apply bg-white text-primary; + } + + &.p-select-option-selected { + @apply bg-support-1 text-primary; + + &.p-focus { + @apply bg-support-1 text-primary; + } + } + } + + &-option-blank-icon { + @apply shrink-0 + } + + &-option-check-icon { + @apply relative shrink-0 text-support-3; + } + + &-empty-message { + @apply px-4 py-2; + } + + &-fluid { + @apply flex w-full; + } +} + +select.p-select { + @apply px-4 py-2; +} diff --git a/assets/css/scss/index.scss b/assets/css/scss/index.scss index f62e4dae56b..33967759188 100755 --- a/assets/css/scss/index.scss +++ b/assets/css/scss/index.scss @@ -35,8 +35,8 @@ @include meta.load-css("atoms/checkbox"); @include meta.load-css("atoms/color_picker"); @include meta.load-css("atoms/divider"); -@include meta.load-css("atoms/dropdown"); @include meta.load-css("atoms/fieldset"); +@include meta.load-css("atoms/float_label"); @include meta.load-css("atoms/inline_message"); @include meta.load-css("atoms/inputgroup"); @include meta.load-css("atoms/input_switch"); @@ -48,6 +48,7 @@ @include meta.load-css("atoms/progressbar"); @include meta.load-css("atoms/radio"); @include meta.load-css("atoms/rating"); +@include meta.load-css("atoms/select"); @include meta.load-css("atoms/skeleton"); @include meta.load-css("atoms/tags"); @include meta.load-css("atoms/toast"); @@ -55,7 +56,6 @@ @include meta.load-css("molecules/chip"); @include meta.load-css("molecules/course_tool"); -@include meta.load-css("molecules/datepicker"); @include meta.load-css("molecules/empty_state"); @include meta.load-css("molecules/teacher_bar"); @include meta.load-css("molecules/toolbar"); @@ -66,7 +66,7 @@ @include meta.load-css("organisms/datatable"); @include meta.load-css("organisms/dataview"); @include meta.load-css("organisms/external_logins"); -@include meta.load-css("organisms/modals"); +@include meta.load-css("organisms/dialog"); @include meta.load-css("organisms/menu"); @include meta.load-css("organisms/sidebar"); @include meta.load-css("organisms/section_header"); diff --git a/assets/css/scss/layout/_topbar.scss b/assets/css/scss/layout/_topbar.scss index 29072e39a65..21d2d570516 100644 --- a/assets/css/scss/layout/_topbar.scss +++ b/assets/css/scss/layout/_topbar.scss @@ -1,233 +1,199 @@ .app-topbar { - @apply flex bg-white border-b border-solid border-gray-25 fixed left-0 p-4 top-0 w-full text-gray-50 z-10 - md:text-gray-90; + @apply flex bg-white border-b border-solid border-gray-25 fixed left-0 top-0 w-full z-10 py-4; - &__start { - @apply mr-auto; - } - - &__items { - @apply flex grow justify-end items-center gap-6; - } - - &__end { - @apply ml-6 flex items-center gap-6; - } - - .item-button { - @apply w-6 h-6 relative; - - .mdi, - &__icon { - @apply text-gray-50 inline-block transition-colors - hover:text-gray-90; - font-size: 18px; - line-height: 18px; - height: 18px; - width: 18px; - - &::before { - font-size: 18px; - line-height: 18px; - } - } + .p-menubar { + @apply text-gray-90 container mx-auto; - &__badge { - @apply bg-error text-white rounded-full text-tiny font-semibold absolute text-center h-4 w-4 -top-1 -right-1; + .p-menubar-start { + @apply ml-4 mr-auto + md:ml-0; } - &--unread { - @apply text-gray-90; + .p-menubar-button { + @apply w-6 h-6 text-gray-50 mx-4 my-2 outline-none; - .item-button__icon, - .mdi { - @apply text-gray-90; + .p-icon { + @apply w-[18px] h-[18px]; } } - } - - .user-avatar { - @apply rounded-full w-6 h-6 text-white bg-primary leading-6 text-body-2 font-semibold; - - img { - @apply rounded-full w-6 h-6; - } - } - - .p-menubar-button { - @apply hidden cursor-pointer items-center justify-center; - } - - .p-menubar { - @apply flex container mx-auto; - - .p-menuitem-link { - @apply cursor-pointer flex items-center overflow-hidden relative py-1 px-4 - focus:outline-none focus:outline-offset-0 focus:text-primary hover:text-primary; - } &.p-menubar-mobile { - @apply justify-between; + @apply bg-white w-full; .p-menubar-root-list { - @apply absolute hidden w-full pt-8; + @apply pt-8; + height: calc(100vh - 3.5rem - 1px); - > .p-menuitem { - @apply w-full px-6 pb-2; + > .p-menubar-item { + @apply w-full px-6 pb-2 text-gray-50; - > .p-submenu-list { - @apply right-auto; + > .p-menubar-item-content .p-menubar-item-link { + @apply py-3 px-9 + hover:border-l-4 hover:border-primary hover:border-solid hover:pl-8 hover:bg-support-1 + focus:border-l-4 focus:border-primary focus:border-solid focus:pl-8 focus:bg-support-1; } + } - &:last-child { - @apply border-t border-solid border-gray-25 py-5 mt-auto; + > .p-menubar-item:last-child { + @apply border-t border-solid border-gray-25 py-5 px-6 mt-auto; - > .p-menuitem-content .p-menuitem-link { - @apply rounded-lg - hover:bg-primary hover:text-white - focus:bg-primary focus:text-white; - } + > .p-menubar-item-content .p-menubar-item-link { + @apply py-2 px-4 rounded-lg border-0 + hover:bg-primary hover:text-white + focus:bg-primary focus:text-white; + } - &.p-menuitem-active > .p-menuitem-content .p-menuitem-link { + &.p-menubar-item-active { + > .p-menubar-item-content .p-menubar-item-link { @apply bg-primary text-white; } - - .p-menuitem-link { - @apply py-1 px-4 - hover:border-l-0 hover:border-none hover:pl-4 - focus:border-l-0 focus:border-none focus:pl-4; - } } } - } - - .p-menubar-button { - @apply rounded-lg flex h-8 w-8 transition-none outline-transparent - hover:bg-white hover:text-gray-50 focus:outline-0 focus:outline-offset-0; - } - - .p-menuitem-link { - @apply py-2.5 px-9 - hover:border-l-4 hover:border-primary hover:border-solid hover:pl-8 hover:bg-support-1 - focus:border-l-4 focus:border-primary focus:border-solid focus:pl-8 focus:bg-support-1; - } - .p-submenu-list { - @apply max-h-[15.5rem] overflow-y-auto absolute border-0 bottom-16 -mb-0.5; - width: calc(100% - 3rem); + .p-menubar-submenu { + @apply max-h-[15.5rem] overflow-y-auto absolute border-0 bottom-16 left-6; + width: calc(100vw - 3rem); + } } } + } - &.p-menubar-mobile-active { - .p-menubar-root-list { - @apply flex flex-col left-0 z-[1]; + .p-menubar-root-list { + @apply bg-white top-14 mt-[1px] outline-none + md:justify-end grow md:flex-wrap md:items-center; - top: calc(100% + 1px); - height: calc(100vh - 4.5rem - 1px); - } + > .p-menubar-item:last-child .p-menubar-submenu { + @apply md:right-0; } + } - .p-submenu-list { - @apply hidden absolute z-[1] px-0 bg-white drop-shadow-lg rounded-lg - after:content-[""] after:w-full after:block after:h-3 after:sticky after:bg-white after:z-[2] after:bottom-0 after:rounded-b-lg - before:content-[""] before:w-full before:block before:h-3 before:sticky before:bg-white before:z-[2] before:top-0 before:rounded-b-lg; + .p-menubar-item-content { + @apply md:py-2; - > .p-menuitem-active > .p-submenu-list { - @apply block left-full top-0; - } + .p-menubar-item-link { + @apply font-semibold + hover:outline-none hover:outline-offset-0 hover:text-primary + focus:outline-none focus:outline-offset-0 focus:text-primary + md:px-4 md:py-2 md:text-body-1; } } - .p-menubar-root-list { - @apply flex items-center flex-wrap outline-0 bg-white grow justify-end relative; + .p-menubar-item { + @apply relative; + } - > li ul { - @apply hidden z-[1]; - } + .p-menubar-submenu { + @apply bg-white outline-none rounded-lg drop-shadow-lg py-3; - > .p-menuitem-active > .p-submenu-list { - @apply block right-0; + .p-menubar-item { + .p-menubar-item-content { + @apply md:p-0; + + .p-menubar-item-link { + @apply bg-white text-body-1 py-2 px-4 font-normal + hover:bg-support-1 + focus:bg-support-1 + active:bg-support-1 active:text-primary; + } + } } } -} -.app-topbar__user-submenu { - .p-menuitem-link { - @apply rounded-none py-1 px-4 transition-none select-none; + &__start { + @apply ml-4 mr-auto; + } - &:focus { - @apply outline-none outline-offset-0; - } + &__items { + @apply flex grow justify-end items-center gap-6; - &:hover, - &:focus { - @apply text-primary; - } - } -} + .item-button { + @apply w-8 h-8 relative text-center; -.app-topbar .p-menubar-root-list { - .p-menuitem-icon { - @apply mr-2; + .mdi, + &__icon { + @apply text-gray-50 inline-block transition-colors align-middle text-2xl leading-6 w-6 h-6 + hover:text-gray-90; - &:empty { - @apply mx-0; + &::before { + @apply text-2xl leading-6; + } + } + + &__badge { + @apply bg-error text-white rounded-full text-tiny font-semibold absolute text-center h-4 w-4 top-0 right-0; + } + + &.router-link-exact-active .mdi { + @apply text-gray-90; + } } } - > .p-menuitem { - > .p-menuitem-link { + &__end { + @apply ml-6 mr-4 flex items-center gap-6; - .p-submenu-icon { - @apply mr-2 -order-1; - } + .user-avatar { + @apply rounded-full w-8 h-8 text-white bg-primary leading-6 text-body-2 font-semibold; - &:focus { - @apply outline-none outline-offset-0; + img { + @apply rounded-full w-8 h-8; } } - &.p-menuitem-active { - > .p-menuitem-link { - @apply text-primary; + .item-button { + @apply w-8 h-8 relative; + + .mdi, + &__icon { + @apply text-gray-50 inline-block transition-colors align-middle text-2xl leading-6 w-6 h-6 + hover:text-gray-90; + + &::before { + @apply text-2xl leading-6; + } } } } -} -.app-topbar__user-submenu { - @apply bg-white border-none rounded-lg drop-shadow-lg py-3 px-0 w-52 max-h-60 overflow-y-auto; + &__user-submenu { + @apply mt-1 border-0 drop-shadow-lg rounded-lg; - .p-submenu-header { - @apply rounded-t-none font-semibold m-0 py-3 px-4; - } - .p-menu-separator { - @apply border-t border-solid my-1 mx-0; - } + ul.p-menu-list { + @apply outline-none; + } - &.p-menu-overlay { - @apply border-none drop-shadow-lg; - } + .p-menu-submenu-label { + @apply text-body-1 font-semibold py-1 px-4; + } + + .p-menu-item-link { + @apply rounded-none py-1 px-4 transition-none select-none flex gap-1; + + &:focus { + @apply outline-none outline-offset-0; + } - .p-menuitem { - .p-menuitem-link { &:hover, &:focus { - @apply bg-support-1; + @apply text-primary bg-support-1; + } + + .p-menu-item-label { + @apply text-body-1; } } } } -.app-topbar .p-menubar { - .p-submenu-list { +.app-topbars .p-menubar { + .p-menubar-submenu { .p-submenu-icon { } - >.p-menuitem:hover, - >.p-menuitem:focus { - > .p-menuitem-link { + >.p-menubar-item:hover, + >.p-menubar-item:focus { + > .p-menubar-item-link { @apply bg-support-1; } } @@ -235,7 +201,7 @@ } @media (max-width: 639px) { - .app-topbar .p-menubar { + .app-topbars .p-menubar { &.p-menubar-mobile-active { + .app-main { @apply max-h-screen overflow-hidden; diff --git a/assets/css/scss/molecules/_datepicker.scss b/assets/css/scss/molecules/_datepicker.scss deleted file mode 100644 index 8f31f8f23ac..00000000000 --- a/assets/css/scss/molecules/_datepicker.scss +++ /dev/null @@ -1,133 +0,0 @@ -.p-calendar { - &.p-invalid { - &.p-component { - > .p-inputtext { - @apply border-error; - } - } - } -} - -.p-datepicker { - @apply bg-white p-0 rounded-lg text-body-2; - - &:not(.p-datepicker-inline) { - @apply shadow-lg; - } - - .p-datepicker-calendar-container { - @apply flex gap-2 p-2; - } - - .p-datepicker-header { - @apply border-b border-solid border-gray-30 flex gap-2 rounded-t-lg p-2; - - .p-datepicker-prev, - .p-datepicker-next { - @apply cursor-default font-semibold p-2 text-gray-50; - - &:enabled { - @apply hover:outline-none hover:text-gray-90 focus:outline-none focus:text-gray-90; - } - } - - .p-datepicker-title { - @apply flex font-semibold gap-2; - - .p-datepicker-year, - .p-datepicker-month { - @apply cursor-default p-2 text-gray-90; - - &:enabled { - @apply hover:text-black; - } - } - } - } - - table { - - th { - @apply px-0 py-1; - - > span { - @apply text-gray-90 h-8 w-8; - } - } - - tbody { - @apply border-none; - } - - td { - @apply p-0.5; - - > span { - @apply cursor-default h-8 rounded-lg w-8 - focus:outline-none focus:outline-offset-0; - } - - > span.p-highlight { - @apply bg-support-3 text-support-4; - } - } - - td.p-datepicker-today { - > span { - @apply bg-gray-30; - - &.p-highlight { - @apply bg-support-3 text-support-4; - } - } - } - } - - .p-timepicker { - @apply border-t border-solid border-gray-30 flex font-semibold justify-center gap-2 rounded-b-lg p-2; - - button { - @apply cursor-default h-8 w-8 text-gray-50; - - &:enabled { - @apply hover:outline-none hover:text-gray-90 focus:outline-none focus:text-gray-90; - } - } - } - - .p-monthpicker { - @apply gap-2 grid grid-cols-3 grid-rows-4 p-2; - - .p-monthpicker-month { - @apply rounded-lg mx-auto p-2; - } - - .p-monthpicker-month.p-highlight { - @apply bg-support-3 text-support-4; - } - } - - .p-yearpicker { - @apply gap-2 grid grid-cols-2 p-2; - - .p-yearpicker-year { - @apply rounded-lg mx-auto p-2; - } - - .p-yearpicker-year.p-highlight { - @apply bg-support-3 text-support-4; - } - } - - &:not(.p-disabled) { - table td span, - .p-monthpicker .p-monthpicker-month, - .p-yearpicker .p-yearpicker-year { - &:not(.p-disabled) { - &:not(.p-highlight) { - @apply hover:bg-gray-50; - } - } - } - } -} diff --git a/assets/css/scss/organisms/_modals.scss b/assets/css/scss/organisms/_dialog.scss similarity index 53% rename from assets/css/scss/organisms/_modals.scss rename to assets/css/scss/organisms/_dialog.scss index 140ea278597..b9acfc910d8 100644 --- a/assets/css/scss/organisms/_modals.scss +++ b/assets/css/scss/organisms/_dialog.scss @@ -1,7 +1,7 @@ .p-dialog { @apply max-h-[90%] scale-100 drop-shadow-lg rounded-lg border-0 border-none; - .p-dialog-header { + &-header { @apply bg-white border-b border-solid border-gray-30 gap-4 rounded-t-lg p-4; .p-dialog-title { @@ -13,11 +13,11 @@ } } - .p-dialog-header-icons { + &-header-icons { @apply flex gap-4 items-center; } - .p-dialog-header-icon { + &-header-icon { @apply flex items-center justify-center overflow-hidden relative; &:enabled { @@ -27,31 +27,31 @@ } } } -} -.p-dialog-content { - @apply overflow-y-auto bg-white overscroll-contain p-4; -} + &-content { + @apply overflow-y-auto bg-white overscroll-contain p-4; + } -.p-dialog-header { - @apply flex items-center justify-between flex-shrink-0; -} + &-header { + @apply flex items-center justify-between flex-shrink-0; + } -.p-dialog-footer { - @apply flex-shrink-0 bg-gray-15 flex gap-4 justify-end rounded-b-lg p-4; -} + &-footer { + @apply flex-shrink-0 bg-gray-15 flex gap-4 justify-end rounded-b-lg p-4; + } -.p-dialog-enter-active { - @apply transition-all duration-150 ease-in; -} + &-enter-active { + @apply transition-all duration-150 ease-in; + } -.p-dialog-leave-active { - @apply transition-all duration-150 ease-out; -} + &-leave-active { + @apply transition-all duration-150 ease-out; + } -.p-dialog-enter-from, -.p-dialog-leave-to { - @apply opacity-0 scale-75; + &-enter-from, + &-leave-to { + @apply opacity-0 scale-75; + } } .p-dialog.p-confirm-dialog { diff --git a/assets/css/scss/organisms/_sidebar.scss b/assets/css/scss/organisms/_sidebar.scss index e5123b9904c..2b84bd83b8c 100644 --- a/assets/css/scss/organisms/_sidebar.scss +++ b/assets/css/scss/organisms/_sidebar.scss @@ -13,7 +13,7 @@ } &__panel { - @apply pt-8 px-0 overflow-x-hidden overflow-y-auto flex-1 overscroll-none + @apply pt-8 px-0 overflow-x-hidden overflow-y-auto flex-1 overscroll-none flex flex-col gap-1 sm:pt-5; } @@ -50,103 +50,136 @@ @apply border-primary; } - &.p-button.p-button-icon-only { - @apply h-8 p-0 w-8; - } - - .p-button-label { + .p-togglebutton-label { @apply hidden; } - - .p-togglebutton-input { - @apply appearance-none absolute top-0 left-0 w-full h-full p-0 m-0 opacity-0 outline-0 outline-none; - z-index: 1; - } - - .p-button { - @apply bg-white p-0 text-primary; - } } .p-panelmenu { + @apply flex flex-col gap-1; .p-panelmenu-header-action { - @apply flex items-center gap-2 select-none cursor-pointer relative pl-9 py-3 pr-6 mb-1 overflow-hidden; + @apply flex items-center gap-2 select-none cursor-pointer relative pl-9 py-3 pr-6 overflow-hidden outline-none text-body-2 font-semibold; } .p-menuitem-link { @apply flex items-center select-none cursor-pointer relative overflow-hidden; } + } - .p-panelmenu-header { - @apply outline-none; + .p-panelmenu-panel { - &.p-highlight, - &:hover { - @apply bg-support-1 border-l-4 border-primary border-solid text-primary; + &:first-child { + } - .p-panelmenu-header-action { - @apply pl-8; - } - } + &:last-child { + } + } - .p-panelmenu-header-content { + .p-panelmenu-header { + @apply outline-none; - .p-panelmenu-header-action { + &.p-panelmenu-header-active, + &:hover { + @apply bg-support-1 border-l-4 border-primary border-solid text-primary; - .p-submenu-icon { - @apply order-3 text-body-2 font-semibold; - } + .p-panelmenu-header-action { + @apply pl-8; + } + } - .p-menuitem-icon { - @apply order-1 text-body-2 font-semibold; - } + .p-panelmenu-header-content { + + .p-panelmenu-header-action { + + .p-submenu-icon { + @apply ml-auto text-body-2 font-semibold; } } + } - > .p-panelmenu-header-content a { - .p-menuitem-text { - @apply order-2 grow text-body-2 font-semibold; - } + > .p-panelmenu-header-content a { + .p-menuitem-text { + @apply order-2 grow text-body-2 font-semibold; } } + } - .p-panelmenu-content { + .p-panelmenu-header-content { + } - .p-menuitem { + .p-panelmenu-header-link { + } - > .p-menuitem-content { + .p-panelmenu-header-icon, + .p-panelmenu-item-icon { + // @apply text-gray-50; + } - .p-menuitem-link { - @apply pl-8 py-3 pr-6; + .p-panelmenu-submenu-icon { + // @apply text-gray-50; + @apply rtl:rotate-180; + } - .p-menuitem-icon { - @apply mr-2 leading-none; - } + .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + } - .p-menuitem-text { - @apply text-body-2 - hover:text-primary; - } + .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-icon { + } + + .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-submenu-icon { + } + + .p-panelmenu-submenu { + @apply m-0 p-0 outline-none; + + .p-menuitem-link { + @apply flex items-center gap-2 select-none cursor-pointer relative pl-9 py-3 pr-6 overflow-hidden outline-none text-body-2; + } + } + + .p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover { + } + + .p-panelmenu-content { + + .p-menuitem { + + > .p-menuitem-content { + + .p-menuitem-link { + @apply pl-8 py-3 pr-6; + + .p-menuitem-icon { + @apply mr-2 leading-none; + } + + .p-menuitem-text { + @apply text-body-2 + hover:text-primary; } } + } - &.p-highlight, - &.p-focus { + &.router-link-exact-active, + &.p-focus { - > .p-menuitem-content { + > .p-menuitem-content { - .p-menuitem-link { + .p-menuitem-link { - .p-menuitem-text { - @apply text-primary; - } + .p-menuitem-text { + @apply text-primary; } } } } } } + + .router-link-active { + @apply text-primary; + } } .app-sidebar__topbar-button { @@ -169,7 +202,7 @@ @apply sm:hidden; } - .p-menuitem-text { + .p-panelmenu-header-label { @apply sm:hidden; } } diff --git a/assets/vue/components/Login.vue b/assets/vue/components/Login.vue index db6e90d78ef..58dc951b25f 100644 --- a/assets/vue/components/Login.vue +++ b/assets/vue/components/Login.vue @@ -6,7 +6,7 @@ />