You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
2.7 KiB
141 lines
2.7 KiB
4 years ago
|
//the notifications and new message buttons
|
||
|
|
.ace-nav {
|
||
|
|
height: 100%;
|
||
|
|
margin: 0 !important;
|
||
|
|
|
||
|
|
> li {
|
||
|
|
line-height: @navbar-min-height;
|
||
|
|
height: @navbar-min-height;
|
||
|
|
|
||
|
|
border-left: 1px solid #E1E1E1;
|
||
|
|
padding: 0;
|
||
|
|
|
||
|
|
position: relative;
|
||
|
|
float: left;
|
||
|
|
|
||
|
|
&:first-child {
|
||
|
|
border-left-width: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
> a {
|
||
|
|
background-color: @ace-nav-default;
|
||
|
|
color: #FFF;
|
||
|
|
|
||
|
|
display: block;
|
||
|
|
line-height: inherit;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
height: 100%;
|
||
|
|
width: auto;
|
||
|
|
min-width: 50px;
|
||
|
|
padding: 0 8px;
|
||
|
|
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
> .@{icon} {
|
||
|
|
display: inline-block;
|
||
|
|
font-size: @font-size-navbar-user-button-icon;
|
||
|
|
color: #FFF;
|
||
|
|
text-align: center;
|
||
|
|
width: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
> .badge {
|
||
|
|
position: relative;
|
||
|
|
top: -4px;
|
||
|
|
left: 2px;
|
||
|
|
|
||
|
|
padding-right: 5px;
|
||
|
|
padding-left: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
> a:hover , > a:focus, &.open > a {
|
||
|
|
background-color: desaturate(darken(@ace-nav-default, 4%), 4%);
|
||
|
|
color: #FFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
//different colors
|
||
|
|
.ace-nav-color(@color) {
|
||
|
|
@ace-nav-class: ~`"ace-nav-@{color}"`;
|
||
|
|
@ace-nav-bg: ~`"ace-nav-@{color}"`;
|
||
|
|
@ace-nav-cl: @@ace-nav-bg;
|
||
|
|
|
||
|
|
&.@{color} > a {
|
||
|
|
background-color:@ace-nav-cl;
|
||
|
|
}
|
||
|
|
&.@{color} > a:hover , &.@{color} > a:focus, &.open.@{color} > a {
|
||
|
|
background-color: desaturate(darken(@ace-nav-cl, 4%), 4%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.ace-nav-color(~"grey");
|
||
|
|
.ace-nav-color(~"purple");
|
||
|
|
.ace-nav-color(~"green");
|
||
|
|
.ace-nav-color(~"light-blue");
|
||
|
|
.ace-nav-color(~"light-blue2");
|
||
|
|
.ace-nav-color(~"red");
|
||
|
|
.ace-nav-color(~"light-green");
|
||
|
|
.ace-nav-color(~"light-purple");
|
||
|
|
.ace-nav-color(~"light-orange");
|
||
|
|
.ace-nav-color(~"light-pink");
|
||
|
|
.ace-nav-color(~"dark");
|
||
|
|
.ace-nav-color(~"white-opaque");
|
||
|
|
.ace-nav-color(~"dark-opaque");
|
||
|
|
|
||
|
|
//some extra ones
|
||
|
|
&.transparent > a {
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
&.transparent > a:hover, &.transparent > a:focus, &.open.transparent > a {
|
||
|
|
background-color: rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.light-10 > a {
|
||
|
|
background-color: rgba(255,255,255,0.1);
|
||
|
|
}
|
||
|
|
&.light-10 > a:hover, &.light-10 > a:focus, &.open.light-10 > a {
|
||
|
|
background-color: rgba(255,255,255,0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.dark-10 > a {
|
||
|
|
background-color: rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
&.dark-10 > a:hover, &.dark-10 > a:focus, &.open.dark-10 > a {
|
||
|
|
background-color: rgba(0,0,0,0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
//margins
|
||
|
|
.marginX (@index) when (@index > 0) {
|
||
|
|
&.margin-@{index} { margin-left: unit(@index,px); }
|
||
|
|
.marginX(@index - 1);
|
||
|
|
}
|
||
|
|
.marginX(4);
|
||
|
|
&.no-border {
|
||
|
|
border-width: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
///
|
||
|
|
.dropdown-menu {
|
||
|
|
z-index: @zindex-navbar-fixed + 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-user-photo {
|
||
|
|
margin: -4px 8px 0 0;
|
||
|
|
|
||
|
|
border-radius: 100%;
|
||
|
|
border: 2px solid #FFF;
|
||
|
|
|
||
|
|
max-width: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
li.dropdown-footer a .@{icon} {
|
||
|
|
// the arrow indicating "See more" on each dropdown , and the icons of user menu */
|
||
|
|
display: inline-block;
|
||
|
|
width: 1.25em;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|