@mixin bordered-horizontal-nav($border-width) { li { flex: 1 1 auto; margin: 0; display: flex; a { box-sizing: border-box; width: 100%; display: flex; justify-content: center; align-items: center; position: relative; border-bottom: var(--user-navigation__border-width) solid transparent; padding: calc(0.75em + var(--user-navigation__border-width)) 0.5em 0.75em; transition: color 0.25s; @include breakpoint(extra-large) { font-size: var(--font-0); } span { line-height: normal; @include ellipsis; } &:hover, &:focus { background: transparent; color: var(--quaternary); border-bottom: var(--user-navigation__border-width) solid var(--quaternary-low); } &.active { color: var(--quaternary); background: transparent; border-bottom: var(--user-navigation__border-width) solid var(--quaternary); } } } } @mixin bordered-nav-pills { width: 100%; margin: 0; .d-icon { font-size: var(--font-down-1); } &.main-nav { @include breakpoint(medium) { li { .d-icon { font-size: var(--font-up-1); margin: 0; } span { display: none; } } } .has-sidebar-page & { @include breakpoint(large) { span { display: none; } } } } } .new-user-wrapper { .user-navigation { --user-navigation__border-width: 4px; border-bottom: 1px solid var(--primary-low); .nav-pills { @include bordered-nav-pills; @include bordered-horizontal-nav(var(--user-navigation__border-width)); } } .user-navigation-primary { [class*="horizontal-overflow-nav__scroll"] { font-size: var(--font-up-1); .d-icon { margin-top: 0.15em; // minor alignment } } } .user-navigation-secondary { --user-navigation__border-width: 2px; --navigation-secondary-padding-top: 0.5em; position: relative; display: flex; min-width: 0; margin: 0; gap: 0 0.5em; border-bottom: 1px solid var(--primary-low); .select-kit .select-kit-header { height: 100%; padding: 0.5em 1em; } .user-nav-messages-dropdown { // manage long group names max-width: 20vw; min-width: 7em; .select-kit-selected-name, .name { @include ellipsis; } .name { min-width: 0; } } .category-breadcrumb { width: auto; padding-top: var(--navigation-secondary-padding-top); @include breakpoint(extra-large) { font-size: var(--font-down-1); } > li { margin: 0; } } .navigation-controls { padding-top: var(--navigation-secondary-padding-top); flex-wrap: nowrap; @include breakpoint(extra-large) { font-size: var(--font-down-1); } span { display: inline-flex; } } .nav-pills { flex: 1 1 auto; font-size: var(--font-down-1); justify-content: flex-start; padding-top: var(--navigation-secondary-padding-top); li { flex: 1 0 auto; a { padding: 0.5em 0.5em calc(0.5em + var(--user-navigation__border-width)); span { text-overflow: unset; } } } } [class*="horizontal-overflow-nav__scroll"] { padding-top: var(--navigation-secondary-padding-top); } } .empty-state { padding: 0; margin: 1em 0; } .solo-preference { grid-column-start: 1; grid-column-end: -1; } } .user-preferences-tracking-page { .user-preferences .form-vertical { width: 100%; } } .user-preferences__tracking-topics-wrapper { margin-bottom: 3em; .control-label { margin-bottom: 1em; } } .user-preferences__tracking-categories-tags-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); gap: 2em; .control-group { width: 100%; min-width: 16em; } }