@import '../../shared/styles/variables'; $mobile-menu-compact-breakpoint: 550px; :host { display: block; box-sizing: border-box; } ul.menu-root { margin: 0; padding: 0; } .menu-header { text-transform: uppercase; color: $headers-color; padding: 0 $side-menu-item-hpadding; margin: 10px 0; } .mobile-nav { display: none; height: 3em; line-height: 3em; box-sizing: border-box; border-bottom: 1px solid #ccc; cursor: pointer; &:after { content: ""; display: inline-block; width: 3em; height: 3em; background: url('data:image/svg+xml;utf8,'); background-size: 70%; background-repeat: no-repeat; background-position: center; float: right; vertical-align: middle; } .menu-header { padding: 0 10px 0 20px; font-size: 0.95em; @media (max-width: $mobile-menu-compact-breakpoint) { display: none; } } } @media (max-width: $side-menu-mobile-breakpoint) { .mobile-nav { display: block; } #resources-nav { height: 0; overflow-y: auto; transition: all 0.3s ease; } #resources-nav .menu-header { display: none; } .menu-subitems { height: auto; } } .selected-tag { text-transform: capitalize; } .selected-endpoint:before { content: "/"; padding: 0 2px; color: #ccc; } .selected-endpoint:empty:before { display: none; } .selected-item-info { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; box-sizing: border-box; max-width: 350px; @media (max-width: $mobile-menu-compact-breakpoint) { display: inline-block; padding: 0 20px; max-width: 80%; max-width: calc(100% - 4em); } }