/************************************************************************************
DevPortal Navbar Menu Button Only appears in the mobile view. Looks like the traditional hamberger menu icon, but animates to an 'x' when the menu is open. This is done using css transitions to animate a span and it's :before and :after psudo:elements.
**************************************************************************************/
@import 'base';
.dp-navbar-mobile-menu-toggle {
font-size: 18px; padding: 12px 16px; display: inline-block; position: relative; z-index: 110; outline: none; background-color: transparent; top: 2px; border: none; @include desktop { display: none; }
}
.dp-navbar-menu-toggle-image {
width: 21px; height: 21px; vertical-align: middle; fill: $preLoginTextColor;
}
.dp-navbar-mobile-menu-toggle:hover {
background-color: rgba(0,0,0,.05);
}
.dp-navbar-menu-toggle-icon {
position: relative; display: inline-block; width: 21px; height: 21px; vertical-align: middle;
} .dp-navbar-menu-toggle-icon span {
margin: 0 auto; position: relative; top: 6px;
}
.dp-navbar-menu-toggle-icon span:before, .dp-navbar-menu-toggle-icon span:after {
position: absolute; content: '';
} .dp-navbar-menu-toggle-icon span, .dp-navbar-menu-toggle-icon span:before, .dp-navbar-menu-toggle-icon span:after {
width: 20px; height: 2px; background-color: $preLoginTextColor; display: block;
}
.dp-navbar-postlogin .dp-navbar-menu-toggle-icon span, .dp-navbar-postlogin .dp-navbar-menu-toggle-icon span:before, .dp-navbar-postlogin .dp-navbar-menu-toggle-icon span:after {
background-color: #e2e2e2;
}
.dp-navbar-menu-toggle-icon:hover span, .dp-navbar-menu-toggle-icon:hover span:before, .dp-navbar-menu-toggle-icon:hover span:after {
background-color: #222;
}
.dp-navbar-postlogin .dp-navbar-menu-toggle-icon:hover span, .dp-navbar-postlogin .dp-navbar-menu-toggle-icon:hover span:before, .dp-navbar-postlogin .dp-navbar-menu-toggle-icon:hover span:after {
background-color: white;
}
.dp-navbar-menu-toggle-icon span:before {
margin-top: -6px;
} .dp-navbar-menu-toggle-icon span:after {
margin-top: 6px;
}
.dp-navbar-menu-toggle-icon span {
-webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s;
} .dp-navbar-menu-toggle-icon.dp-navbar-menu-toggle-icon–open span {
background-color: rgba(0,0,0,0.0); -webkit-transition-delay: 0.2s; transition-delay: 0.2s;
} .dp-navbar-menu-toggle-icon span:before {
-webkit-transition-property: margin, -webkit-transform; transition-property: margin, transform; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s;
} .dp-navbar-menu-toggle-icon–open span:before {
margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s;
} .dp-navbar-menu-toggle-icon span:after {
-webkit-transition-property: margin, -webkit-transform; transition-property: margin, transform; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s;
} .dp-navbar-menu-toggle-icon–open span:after {
margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s;
}