@ubertheme/mega-menu/src/components/Horizontal/item.module.css

UB Mega Menu Module for Magento PWA Studio

/*
    Table Content
    1. @Items
    2. @Link
    3. @Title
    4. @Desc
    5. @Rich Content
    6. @Level2
    7. @Level3
    8. @Level4
    9. @Level5
*/

@media screen(lg) {
    /* @Items */
    .root {
        @apply inline-block text-sm relative;
        line-height: 80px;
    }
    .root.dynamic_width {
        @apply static;
    }
    .root.fixed_width {}
    /* @Link */
    .root.has_childs>a {
        @apply z-10 relative border-l border-r border-solid border-transparent;
    }
    .root.has_childs:hover>a {
        @apply bg-white border-gray-200;
    }
    .root .link {
        @apply flex font-medium px-1 no-underline text-gray-700;
    }
    .root .link.active {
        @apply text-red-600;
    }
    .root .link:hover {
        @apply no-underline outline-none text-red-600 bg-white;
    }
    .root:hover .link {
        @apply text-red-600;
    }
    /* @Title */
    .root.has_childs span svg {
        @apply inline-block ml-1.5;
    }
    .root.has_childs .link.active:hover {
        @apply text-red-600;
        background-color: inherit;
    }
    /* @Desc */
    .root .item_desc {
        @apply leading-4 px-5 pb-5;
    }
    .root .item_desc img {
        @apply w-full;
    }
    /* @richContent */
    .root .item_rich_content {
        @apply leading-7;
    }
    .root .item_rich_content p {
        @apply mb-4;
    }
    .root .item_rich_content h3 {
        @apply mb-4;
    }
    .root .item_rich_content img {
        @apply w-full px-4 pt-8;
    }
    /* @Level2 */
    .root>.level2 {
        @apply bg-white absolute left-0 text-left invisible opacity-0 w-full p-4;
        min-width: 11rem;
        font-size: 0;
        z-index: 9;
        top: 79px;
        border: 1px solid #eee;
        box-shadow: 3px 3px 3px #555;
    }
    .root:hover>.level2 {
        @apply visible opacity-100;
    }
    .root>.level2 .all-items {
        @apply uppercase mt-2.5;
    }
    .root>.level2 .all-items .link {
        @apply no-underline font-medium;
    }
    .root>.level2 .all-items .link span {
        @apply pr-0 italic border-b border-solid border-gray-300 inline w-auto;
    }
    .root>.level2 .all-items .link span svg {
        @apply right-auto;
    }
    .root .column {
        @apply inline-block align-top;
    }
    .column1 {}
    .column2 {}
    .column3 {}
    .column4 {}
    .root>.level2>.root {
        @apply block leading-7 w-full;
    }
    .root.dynamic_width>.level2>.root {
        @apply px-5;
    }
    .root>.level2 .root a {
        @apply p-0 font-normal;
    }
    .root>.level2 .root.has_childs a {
        @apply border-l-0 border-r-0;
    }
    .root:hover .level2 .root a {
        @apply text-gray-700;
    }
    .root:hover .level2 .root:hover a,
    .root:hover .level2 .root a:hover {
        @apply text-red-600;
    }
    .root>.level2 .root span {
        @apply block w-full;
    }
    .root>.level2 .has_childs span svg {
        @apply absolute ml-1 top-2 right-0;
    }
    /* @single */
    .root:not(.columns)>.level2 .root {
        @apply block;
    }
    .root:not(.columns)>.level2 .root a {
        @apply p-0 text-gray-700;
    }
    .root:not(.columns)>.level2 .root a:hover {
        @apply text-red-600;
    }
    .root.group {
        @apply inline-block !important;
    }
    .root.group>a {
        @apply font-medium !important;
        @apply p-0 !important;
        @apply uppercase !important;
    }
    .root.group>a svg {
        @apply hidden !important;
    }
    /* @Level3 */
    .root>.level3 {
        @apply bg-white absolute left-full text-left top-0 invisible z-10 opacity-0 w-52 p-4 transition-all;
        min-width: 150px;
        font-size: 0;
    }
    .root>.level3>.root {
        @apply leading-7;
    }
    .root:hover>.level3 {
        @apply visible opacity-100;
    }
    .root:hover .level2 .level3 .root a {
        @apply font-normal normal-case text-gray-700;
    }
    .root:hover .level2 .level3 .root:hover a,
    .root:hover .level2 .level3 .root a:hover {
        @apply text-red-600;
        background-color: inherit;
    }
    /* @single*/
    .root:not(.columns)>.level3 {
        @apply border border-solid border-gray-200 p-4;
    }
    /* @groups */
    .root.group>.level3 {
        @apply static w-full p-0 border-0;
    }
    .root.group>.level3 .root {
        @apply leading-7 w-full block;
    }
    .columns:hover .root.group>.level3 {
        @apply visible opacity-100;
    }
    /* @Level4 */
    .root>.level4 {
        @apply bg-white absolute left-full text-left top-0 invisible z-10 opacity-0 w-52 p-4 transition-all;
        min-width: 150px;
        font-size: 0;
    }
    .root>.level4>.root {
        @apply leading-7;
    }
    .root:hover>.level4 {
        @apply visible opacity-100;
    }
    .root:hover .level2 .level3 .level4 .root a {
        @apply text-gray-700;
    }
    .root:hover .level2 .level3 .level4 .root:hover a,
    .root:hover .level2 .level3 .level4 .root a:hover {
        @apply text-red-600;
    }
    /* @single */
    .root:not(.columns)>.level4 {
        @apply border border-solid border-gray-200 p-4;
    }
    /* @groups */
    .root.group>.level4 {
        @apply static w-full border-0 p-0;
    }
    .columns:hover .root.group>.level4 {
        @apply visible opacity-100;
    }
    /* @Level5 */
    .root>.level5 {
        @apply bg-white absolute left-full text-left top-0 invisible z-10 opacity-0 w-52 p-4 transition-all;
        min-width: 150px;
        font-size: 0;
    }
    .root>.level5>.root {
        @apply leading-7;
    }
    .root:hover>.level5 {
        @apply visible opacity-100;
    }
    .root:hover .level2 .level3 .level4 .level5 .root a {
        @apply text-gray-700;
    }
    .root:hover .level2 .level3 .level4 .level5 .root:hover a,
    .root:hover .level2 .level3 .level4 .level5 .root a:hover {
        @apply text-red-600;
    }
    /* @single */
    .root:not(.columns)>.level5 {
        @apply border border-solid border-gray-200 p-4;
    }
    /* @groups */
    .root.group>.level5 {
        @apply static w-full border-0 p-0;
    }
    .columns:hover .root.group>.level5 {
        @apply visible opacity-100;
    }
}

@media screen(xl) {
    .root .link {
        @apply px-4;
    }
}