/************************************************************************************
DevPortal Menu This is the primary navigation menu for devportal. The contents of this menu are accessible in dropdowns on a desktop and in an expandable left menu for phones and tablets.
**************************************************************************************/
@import 'base';
// PRIMARY NAV
.dp-primary-nav {
background-color: $background-color-light; border-right: 1px solid #e7e7e7; position: fixed; top: $navHeightMobile; bottom: 0; width: 300px; left: -300px; display: block; margin: 0; z-index: 100; transition: all .3s ease-out; overflow: scroll; @include desktop { background-color: transparent; position: static; width: auto; border-right: none; overflow: hidden; } @include desktop-large { max-width: $desktop-large; margin: 0 auto; }
}
.dp-primary-nav–open {
left: 0;
}
.dp-primary-nav-list {
margin-left: 0;
}
.dp-primary-nav-list-item {
position: relative; transition: max-height .4s ease-in-out; max-height: 51px; overflow: hidden; list-style: none; @include desktop { position: static; max-height: $navHeight; float: left; overflow: initial; padding: 0 1%; &:first-child { margin-left: 16px; } } @include desktop-large { padding: 0 1.25%; }
}
.dp-primary-nav-list-item–open {
max-height: 1000px; .dp-primary-nav-list-expander-icon { transform: rotateX(180deg); }
}
.dp-primary-nav-list-item-current {
@include mobile-only { border-left: #E87825 5px solid; } @include desktop { border-bottom: #E87825 5px solid; }
}
.dp-primary-nav-list-item–isActive {
a.dp-primary-nav-list-link { color: $link-color-hover; }
}
a.dp-primary-nav-list-link {
line-height: 30px; display: inline-block; color: $font-color-primary; border-bottom: 1px solid rgba(0,0,0,.2); padding: 10px 10px 10px 16px; display: block; position: relative; transition: color 0.25s linear; &:hover { text-decoration: none; } @include desktop { border-bottom: none; font-size: $font-size-base; padding: 0; line-height: $navHeight; max-height: $navHeight; &:hover { color: $link-color-hover; text-decoration: underline; } }
}
@include desktop {
.dp-primary-nav-list-item--hasCaret { a.dp-primary-nav-list-link:after { position: absolute; content: ''; border-width: 1px 1px 0 0; border-color: rgba(0, 0, 0, 0.3); border-style: solid; background-color: $background-color-light; right: 50%; transform: translateX(50%) rotate(-45deg); bottom: -7px; transition: all 0s linear; height: 15px; width: 15px; } }
}
.dp-primary-nav-list-expander {
padding: 6px 12px; position: absolute; right: 10px; top: 6px; @include desktop { display: none; }
}
.dp-primary-nav-list-expander:hover {
background: rgba(0,0,0,.05);
}
.dp-primary-nav-list-expander-icon {
width: 14px; height: 14px; vertical-align: middle; transition: transform .4s; fill: #444;
}
.dp-dropdown-panel {
background: $background-color-base; border-width: 0 0 1px 0; border-color: rgba(0,0,0,.2); border-style: solid; @include desktop { display: none; position: absolute; left: 0; width: 100%; top: $navHeight; line-height: initial; border-width: 0 1px 1px 1px; text-align: left; background: $background-color-base; background: -moz-linear-gradient(left, $background-color-base 0%, $background-color-base 25%, $background-color-light 25%, $background-color-light 100%); background: -webkit-linear-gradient(left, $background-color-base 0%,$background-color-base 25%,$background-color-light 25%,$background-color-light 100%); background: linear-gradient(to right, $background-color-base 0%,$background-color-base 25%,$background-color-light 25%,$background-color-light 100%); &:after { content: ''; width: 1px; height: 100%; position: absolute; left: 25%; background-color: $navBorderColor; top: 0; } } @include desktop-large { max-width: $desktop-large; }
}
.dp-dropdown-panel–4col {
@include desktop { background: $background-color-base; &:after { width: 0; } }
}
.dp-dropdown-panel–isActive {
display: block;
}
.dp-dropdown-panel-inner {
position: relative; @include desktop { min-height: 440px; padding: 0; background: -moz-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(255,255,255,0) 24px); background: -webkit-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(255,255,255,0) 24px); background: linear-gradient(to bottom, rgba(246,246,246,1) 0%,rgba(255,255,255,0) 24px); }
}
// SECONDARY NAV
.dp-secondary-nav-list {
padding: 6px 0; @include desktop { overflow: hidden; padding: 0 0 16px; > .dp-secondary-nav-list-item:first-child { padding-top: 16px; } }
}
@media (min-width: 992px) {
.dp-dropdown-panel--1col { width: auto; position: static; left: auto; width: 100%; margin-left: 50%; border: 0; &:after{ display: none; } .dp-dropdown-panel-inner { position: absolute; background-color: #FFF; transform: translateX(-50%); min-height: 0; border: 1px solid rgba(0, 0, 0, 0.2); border-top: 0; } .dp-dropdown-panel-inner .dp-secondary-nav-list--1col { padding-right: 0; padding-bottom: 28px; } .dp-secondary-nav-list--1col { float: left; width: auto; padding-right: 3%; .dp-secondary-nav-list-link { padding-right: 36px; width: 100%; } } .dp-secondary-nav-list-item--isActive .dp-secondary-nav-list-link:after{ display:none; } }
}
.dp-secondary-nav-list–4col {
.dp-secondary-nav-list { margin-bottom: 0; } .dp-secondary-nav-list-title { font-weight: 500; font-size: $font-size-x-small; color: $font-color-tertiary; text-transform: uppercase; padding: 0 16px; font-size: 12px; background-color: $background-color-light; margin-top: -6px; line-height: 125%; } @include desktop { float: left; width: 25%; padding-right: 3%; .dp-secondary-nav-list-title { padding: 36px 0 0 36px; font-size: $font-size-small; margin-top: 0; background-color: transparent; } .dp-secondary-nav-list-link { width: 100%; border-right: none; padding-right: 0; &:hover { .dp-secondary-nav-title { color: $link-color-hover; } } } .dp-secondary-nav-list-item--isActive .dp-secondary-nav-title { color: $font-color-primary; } }
}
.dp-secondary-nav-list-item {
width: 100%; clear: both; @include desktop { padding-left: 0; }
}
.dp-secondary-nav-list-item–isActive {
@include desktop { .dp-secondary-nav-title { color: $link-color-hover; } .dp-tertiary-nav-wrapper { display: block; opacity: 1; visibility: visible; min-height: 380px; } .dp-secondary-nav-list-link { position: relative; &:hover { .dp-secondary-nav-title { text-decoration: underline; } } &:after { position: absolute; content: ''; width: 15px; height: 15px; border-width: 1px 0 0 1px; border-color: rgba(0, 0, 0, 0.3); border-style: solid; background-color: $background-color-light; transform: rotate(-45deg); right: -8px; top: 50%; z-index:100; } } }
}
.dp-secondary-nav-list–4col .dp-secondary-nav-list-item–isActive .dp-secondary-nav-list-link {
&:after { width: 0; height: 0; }
}
.dp-secondary-nav-list-link {
padding: 8px 8px 8px 24px; display: block; &:hover { text-decoration: none; } @include desktop { padding: 16px 36px 8px 36px; width: 25%; float: left; }
}
.dp-secondary-nav-title {
font-size: $font-size-small; color: $font-color-primary; font-weight: $font-weight-regular; margin: 0; @include desktop { font-size: 16px; margin-bottom: 8px; }
}
.dp-secondary-nav-tag {
color: #888; font-size: $font-size-x-small; line-height: 18px; display: none; font-weight: $font-weight-regular; @include desktop { display: block; }
}
.dp-tertiary-nav-wrapper {
height: 0; visibility: hidden; opacity: 0; float: left; width: 75%; position: absolute; top: 0; left: 25%; @include desktop { padding: 32px 24px 16px 16px; }
}
.dp-tertiary-nav-row {
width: 100%; clear: both; margin-bottom: 16px; overflow: hidden;
}
.dp-tertiary-nav-list {
width: 30%; float: left; margin-bottom: 16px;
}
.dp-tertiary-nav-list-title {
font-weight: 500; font-size: 13px; color: #888; text-transform: uppercase; margin-bottom: 8px;
}
.dp-tertiary-nav-list-item {
font-size: $font-size-small; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.dp-tertiary-nav-list-link {
color: #333; font-size: 13px; line-height: 18px; display: inline-block; padding: 3.5px 0; transition: color 0.15s linear; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; &:hover { color: $link-color-hover; text-decoration: none; }
}
// Active nav overlay
.dp-primary-nav-overlay {
position: fixed; z-index: 90; background: rgba(0,0,0,.3); top: $navHeightMobile; left: 0; right: 0; bottom: 0; visibility: hidden; opacity: 0; transition: all 0.4s ease-in-out;
}
.dp-primary-nav-overlay–active {
visibility: visible; opacity: 1;
}
@include desktop {
.dp-primary-nav-overlay { display: none; }
}
.lang-switcher-wrapper {
position: absolute; display:block; color: $preLoginTextColor; @include desktop { right: 38px; } @include desktop-large { right: 140px; }
}
.dp-secondary-nav-list-item–selected a p, .dp-tertiary-nav-list-item–selected {
color: $link-color-hover; font-weight:bold;
}
.lang-switcher-wrapper {
.dp-dropdown-panel-inner, .dp-dropdown-panel { min-height: auto; /* Required for compatibility with IE */ min-height: initial; min-width: 200px; max-width: 300px; } .dp-primary-nav-list-link, .dp-primary-nav-list-item, .dp-secondary-nav-title { font-size: $font-size-x-small; color: $preLoginTextColor; } .lang-switcher-link--isActive .dp-secondary-nav-title { color: $link-color-hover; font-weight:bold; } .dp-secondary-nav-list { position: relative; width: 100%; }
}
.nav-dropdown-arrow {
width: 15px; height: 6px; padding-left: 3px;
}