mirror of
https://github.com/ansible/awx.git
synced 2026-05-16 22:07:36 -02:30
Move menu styles to live with main-menu
This commit is contained in:
45
awx/ui/static/js/main-menu/main-menu.block.less
Normal file
45
awx/ui/static/js/main-menu/main-menu.block.less
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
/** @define MainMenu */
|
||||||
|
|
||||||
|
.MainMenu {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
background-color: white;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
@media screen and (max-width: 570px) {
|
||||||
|
position: relative;
|
||||||
|
transition: height 0.5s ease-out;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 56px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&.Menu--open {
|
||||||
|
height: 523px !important;
|
||||||
|
// border-bottom: solid thin black;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 571px) {
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-toggle {
|
||||||
|
@media screen and (min-width: 571px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--fixedTop {
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1040;
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
<nav class="Menu Menu--main Menu--fixed-top">
|
<nav class="MainMenu MainMenu--fixedTop">
|
||||||
<a href="#/home" title="Home" class="MenuItem MenuItem--logo">
|
<a href="#/home" title="Home" class="MenuItem MenuItem--logo">
|
||||||
<img id="ansible-brand-logo" class="MenuItem-logo" src="/static/img/TowerLogo.svg">
|
<img id="ansible-brand-logo" class="MenuItem-logo" src="/static/img/TowerLogo.svg">
|
||||||
<menu-toggle-button width="15" height="15" bar-height="2"></menu-toggle-button>
|
<menu-toggle-button width="15" height="15" bar-height="2"></menu-toggle-button>
|
||||||
|
|||||||
@@ -1,69 +0,0 @@
|
|||||||
/** @define Menu */
|
|
||||||
|
|
||||||
.Menu {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background-color: white;
|
|
||||||
|
|
||||||
&--main {
|
|
||||||
background-color: white;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
@media screen and (max-width: 570px) {
|
|
||||||
position: relative;
|
|
||||||
transition: height 0.5s ease-out;
|
|
||||||
justify-content: flex-start;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 56px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&.Menu--open {
|
|
||||||
height: 523px !important;
|
|
||||||
// border-bottom: solid thin black;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 571px) {
|
|
||||||
padding: 0 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--popup {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 60px;
|
|
||||||
right: 19px;
|
|
||||||
width: 160px;
|
|
||||||
|
|
||||||
.MenuItem {
|
|
||||||
padding: 0.5rem;
|
|
||||||
border: solid 1px #7A7A7A;
|
|
||||||
border-bottom: none;
|
|
||||||
text-align: center;
|
|
||||||
margin-right: 0;
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: solid 1px #7A7A7A;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-toggle {
|
|
||||||
@media screen and (min-width: 571px) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--fixed-top {
|
|
||||||
// @media screen and (min-width: 571px) {
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1040;
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user