131 lines
3.4 KiB
CSS
131 lines
3.4 KiB
CSS
.menu {
|
|
&.horizontal {
|
|
li {
|
|
&.bordered {
|
|
> a,
|
|
> button,
|
|
> span {
|
|
@apply border-l-0 border-b-4 border-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&[class*=" p-"]:not(&[class*=" p-0"]) li > *,
|
|
&[class^="p-"]:not(&[class^="p-0"]) li > * {
|
|
@apply rounded-btn;
|
|
}
|
|
:where(li.bordered > *) {
|
|
@apply border-l-4 border-primary;
|
|
}
|
|
:where(li) > :where(*:not(ul)) {
|
|
@apply gap-3 px-4 py-3 text-current;
|
|
}
|
|
|
|
:where(li:not(.menu-title):not(:empty)) > :where(*:not(ul):focus),
|
|
:where(li:not(.menu-title):not(:empty)) > :where(*:not(ul):hover) {
|
|
@apply bg-base-content bg-opacity-10;
|
|
}
|
|
:where(li:not(.menu-title):not(:empty)) > :where(:not(ul).active),
|
|
:where(li:not(.menu-title):not(:empty)) > :where(*:not(ul):active) {
|
|
@apply bg-primary text-primary-content;
|
|
}
|
|
:where(li:empty) {
|
|
@apply mx-4 my-2 h-px bg-base-content bg-opacity-10;
|
|
}
|
|
|
|
li.disabled {
|
|
& > * {
|
|
@apply select-none text-base-content text-opacity-20 hover:bg-transparent;
|
|
}
|
|
}
|
|
li.hover-bordered {
|
|
a {
|
|
@apply border-l-4 border-transparent hover:border-primary;
|
|
}
|
|
}
|
|
&.compact {
|
|
li {
|
|
> a,
|
|
> span {
|
|
@apply py-2 text-sm;
|
|
}
|
|
}
|
|
}
|
|
.menu-title {
|
|
> * {
|
|
@apply py-1 text-xs font-bold text-base-content text-opacity-40;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu :where(li:not(.disabled)) > :where(*:not(ul)) {
|
|
@apply outline-none transition duration-200 ease-in-out;
|
|
}
|
|
|
|
.menu > :where(li:first-child) {
|
|
border-top-left-radius: inherit;
|
|
border-top-right-radius: inherit;
|
|
border-bottom-right-radius: unset;
|
|
border-bottom-left-radius: unset;
|
|
}
|
|
.menu > :where(li:first-child) > :where(:not(ul)) {
|
|
border-top-left-radius: inherit;
|
|
border-top-right-radius: inherit;
|
|
border-bottom-right-radius: unset;
|
|
border-bottom-left-radius: unset;
|
|
}
|
|
.menu > :where(li:last-child) {
|
|
border-top-left-radius: unset;
|
|
border-top-right-radius: unset;
|
|
border-bottom-right-radius: inherit;
|
|
border-bottom-left-radius: inherit;
|
|
}
|
|
.menu > :where(li:last-child) > :where(:not(ul)) {
|
|
border-top-left-radius: unset;
|
|
border-top-right-radius: unset;
|
|
border-bottom-right-radius: inherit;
|
|
border-bottom-left-radius: inherit;
|
|
}
|
|
|
|
.menu > :where(li) > :where(ul) {
|
|
border-top-left-radius: inherit;
|
|
border-top-right-radius: inherit;
|
|
border-bottom-right-radius: inherit;
|
|
border-bottom-left-radius: inherit;
|
|
}
|
|
|
|
.menu > :where(li) > :where(ul) :where(li) {
|
|
@apply w-full whitespace-nowrap;
|
|
}
|
|
.menu > :where(li) > :where(ul) :where(li) :where(ul) {
|
|
@apply pl-4;
|
|
}
|
|
.menu > :where(li) > :where(ul) :where(li) > :where(:not(ul)) {
|
|
@apply w-full whitespace-nowrap;
|
|
}
|
|
|
|
.menu > :where(li) > :where(ul) > :where(li:first-child) {
|
|
border-top-left-radius: inherit;
|
|
border-top-right-radius: inherit;
|
|
border-bottom-right-radius: unset;
|
|
border-bottom-left-radius: unset;
|
|
}
|
|
.menu > :where(li) > :where(ul) > :where(li:first-child) > :where(:not(ul)) {
|
|
border-top-left-radius: inherit;
|
|
border-top-right-radius: inherit;
|
|
border-bottom-right-radius: unset;
|
|
border-bottom-left-radius: unset;
|
|
}
|
|
.menu > :where(li) > :where(ul) > :where(li:last-child) {
|
|
border-top-left-radius: unset;
|
|
border-top-right-radius: unset;
|
|
border-bottom-right-radius: inherit;
|
|
border-bottom-left-radius: inherit;
|
|
}
|
|
.menu > :where(li) > :where(ul) > :where(li:last-child) > :where(:not(ul)) {
|
|
border-top-left-radius: unset;
|
|
border-top-right-radius: unset;
|
|
border-bottom-right-radius: inherit;
|
|
border-bottom-left-radius: inherit;
|
|
}
|