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 index 3bc7ebbac8e..a94eed1bb0f 100644 --- a/assets/css/scss/atoms/_dropdown.scss +++ b/assets/css/scss/atoms/_dropdown.scss @@ -1,85 +1,132 @@ -.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; +.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; - font-size: 14px; + &:not(.p-disabled) { + @apply hover:border-primary hover:text-gray-90; - .p-dropdown-panel, .p-multiselect-panel { - @apply min-w-full; + &.p-focus { + @apply border-primary text-gray-90 outline-0 outline-none + } } - &.p-invalid.p-component { - @apply border-error text-error; + &.p-variant-filled { + &:not(.p-disabled) { + &:hover {} + + &.p-focus {} + } } -} -select.p-dropdown { - @apply px-4 py-2; -} + &.p-invalid { + @apply border-danger text-danger; + } + + &.p-disabled { + @apply bg-gray-25 opacity-60; + } -.p-dropdown { &-clear-icon { @apply absolute top-1/2 -mt-2; } - & &-clear-icon { - @apply right-12; + &-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 {} } -} -.p-dropdown-trigger { - @apply flex items-center justify-center flex-shrink-0 - bg-transparent rounded-r-lg w-9; -} + &-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-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-placeholder { + @apply text-gray-50; -.p-dropdown-label-empty { - @apply overflow-hidden opacity-0; -} + .p-select.p-invalid & {} + } -.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-select:has(.p-select-clear-icon) & {} - .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-select.p-disabled & { + @apply text-gray-50; + } - .p-dropdown-item { - @apply px-4 py-2 transition text-body-2 outline-0 outline-none text-gray-90; + &-empty { + @apply overflow-hidden opacity-0; + } - &.p-highlight { - @apply bg-support-3 text-primary; - } + .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 text-primary; + @apply bg-support-1 text-primary; } } } -} -.p-dropdown-items-wrapper { - @apply overflow-auto rounded-lg; -} + &-option-blank-icon { + @apply shrink-0 + } -.p-dropdown-item { - @apply cursor-pointer whitespace-nowrap relative overflow-hidden flex items-center; -} + &-option-check-icon { + @apply relative shrink-0 text-support-3; + } -.p-dropdown-items { - @apply m-0 p-0 list-none; -} + &-empty-message { + @apply px-4 py-2; + } -.p-multiselect-label-container { - @apply p-2; + &-fluid { + @apply flex w-full; + } } +select.p-select { + @apply px-4 py-2; +} 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/layout/_topbar.scss b/assets/css/scss/layout/_topbar.scss index 29072e39a65..39e82ed01b1 100644 --- a/assets/css/scss/layout/_topbar.scss +++ b/assets/css/scss/layout/_topbar.scss @@ -1,158 +1,107 @@ .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 bg-white border-b border-solid border-gray-25 fixed left-0 top-0 w-full z-10; - &__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 + md:py-2; - &__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 mr-auto; } - &--unread { - @apply text-gray-90; + .p-menubar-button { + @apply w-6 h-6 text-gray-50 m-4 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-menubar-item { + .p-menubar-item-content { + @apply md:p-0; - > .p-menuitem-active > .p-submenu-list { - @apply block right-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 { +.app-topbars__user-submenu { + .p-menubar-item-link { @apply rounded-none py-1 px-4 transition-none select-none; &:focus { @@ -166,8 +115,8 @@ } } -.app-topbar .p-menubar-root-list { - .p-menuitem-icon { +.app-topbars .p-menubar-root-list { + .p-menubar-item-icon { @apply mr-2; &:empty { @@ -175,8 +124,8 @@ } } - > .p-menuitem { - > .p-menuitem-link { + > .p-menubar-item { + > .p-menubar-item-link { .p-submenu-icon { @apply mr-2 -order-1; @@ -187,15 +136,15 @@ } } - &.p-menuitem-active { - > .p-menuitem-link { + &.p-menubar-item-active { + > .p-menubar-item-link { @apply text-primary; } } } } -.app-topbar__user-submenu { +.app-topbars__user-submenu { @apply bg-white border-none rounded-lg drop-shadow-lg py-3 px-0 w-52 max-h-60 overflow-y-auto; .p-submenu-header { @@ -210,8 +159,8 @@ @apply border-none drop-shadow-lg; } - .p-menuitem { - .p-menuitem-link { + .p-menubar-item { + .p-menubar-item-link { &:hover, &:focus { @apply bg-support-1; @@ -220,14 +169,14 @@ } } -.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 +184,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/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 @@ />