update
This commit is contained in:
hanjian
@@ -0,0 +1,95 @@
|
||||
//the .navbar.navbar-collapse
|
||||
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
||||
.navbar.navbar-collapse {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
.navbar-header, .navbar-collapse {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//.navbar.navbar-collapse .nav-brand {
|
||||
.navbar.navbar-collapse .navbar-header {
|
||||
float: none !important;
|
||||
min-height: @navbar-min-height;
|
||||
}
|
||||
|
||||
//will become hidden and a .navbar-toggle button toggles it
|
||||
.navbar.navbar-collapse .navbar-buttons {
|
||||
min-height: 0;//the above @navbar-min-height will interfere with CSS3 transition
|
||||
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
border: 1px solid @ace-nav-border;
|
||||
border-width: 1px 0 0;
|
||||
|
||||
width: 100%;
|
||||
|
||||
&.in {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
> .ace-nav {
|
||||
display: block;
|
||||
float: none !important;
|
||||
text-align: center;
|
||||
|
||||
background-color: transparent !important;
|
||||
|
||||
border-width:0;
|
||||
|
||||
letter-spacing: -3px;
|
||||
> li {
|
||||
display: inline-block;
|
||||
float:none !important;
|
||||
text-align: left;
|
||||
|
||||
letter-spacing: normal;
|
||||
|
||||
&:first-child {
|
||||
border-left: 1px solid @ace-nav-border;
|
||||
}
|
||||
&:last-child {
|
||||
border-right: 1px solid @ace-nav-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.container > .navbar-buttons, .container-fluid > .navbar-buttons {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//make fixed navbar-collapse smaller so scrollbars show all content when needed
|
||||
@media only screen and (max-height: 400px) {
|
||||
.navbar-fixed-top .navbar-collapse {
|
||||
max-height: 280px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-height: 360px) {
|
||||
.navbar-fixed-top .navbar-collapse {
|
||||
max-height: 240px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-height: 320px) {
|
||||
.navbar-fixed-top .navbar-collapse {
|
||||
max-height: 200px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-height: 280px) {
|
||||
.navbar-fixed-top .navbar-collapse {
|
||||
max-height: 160px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-height: 240px) {
|
||||
.navbar-fixed-top .navbar-collapse {
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
.enable_top_menu() when(@enable-top-menu = true) {
|
||||
|
||||
.navbar .navbar-nav > li {
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
border-width: 0 1px 0 0;
|
||||
|
||||
&:first-child {
|
||||
border-width: 0 1px 0 1px;//to override .RTL's
|
||||
}
|
||||
> a {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 11px;
|
||||
height: @navbar-min-height;
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
font-size: @font-size-navbar-nav-item;
|
||||
color: @navbar-text-color;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
> a:hover , > a:focus , &.open > a {
|
||||
background-color: rgba(0,0,0,0.1) !important;
|
||||
color: @navbar-text-color !important;
|
||||
}
|
||||
|
||||
> .dropdown-menu > li > a {
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu > li > a > .@{icon} {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
}
|
||||
.navbar-nav > li > .dropdown-menu {
|
||||
z-index: @zindex-navbar-fixed + 3;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
||||
.navbar.navbar-collapse .navbar-menu {
|
||||
float: none !important;
|
||||
clear: both;
|
||||
|
||||
.dropdown-menu {
|
||||
&:after, &:before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.navbar .navbar-nav {
|
||||
margin: 0 -6px;
|
||||
> li {
|
||||
& , &:first-child {
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
float: none;
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
border-width: 0;
|
||||
|
||||
> li > a {
|
||||
color: #FFF !important;
|
||||
&:hover {
|
||||
background-color: rgba(0,0,0,0.07) !important;
|
||||
}
|
||||
|
||||
> .@{icon} {
|
||||
color: #FFF !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar .navbar-nav .dropdown-hover > .dropdown-menu {
|
||||
left: 32px !important;
|
||||
right: auto !important;
|
||||
top: auto !important;
|
||||
|
||||
width: 80% !important;
|
||||
width: ~"calc(100% - 32px)";
|
||||
}
|
||||
}
|
||||
|
||||
//navbar form
|
||||
.navbar-form {
|
||||
&.form-search {
|
||||
margin-top: 9px;
|
||||
margin-bottom: 0;
|
||||
.form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
input[type=text] {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
font-size: @font-size-navbar-nav-input;
|
||||
line-height: 1.4;
|
||||
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
||||
.navbar-form {
|
||||
.form-group {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.form-search input[type=text] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.navbar-nav + .navbar-form {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.navbar {
|
||||
.navbar-collapse, .navbar-form {
|
||||
border-color: @ace-nav-border;
|
||||
}
|
||||
}
|
||||
.navbar .navbar-nav > li:first-child {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
}//@media
|
||||
|
||||
@media only screen and (max-width: @screen-xs) {
|
||||
.navbar-form .form-group {
|
||||
width: 80%;
|
||||
}
|
||||
}//@media
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.enable_top_menu();
|
||||
@@ -0,0 +1,44 @@
|
||||
.navbar .navbar-toggle {
|
||||
border: 1px solid transparent;
|
||||
|
||||
width: 40px;
|
||||
height: 35px;
|
||||
line-height: 0;
|
||||
|
||||
padding:0 0 1px;
|
||||
text-align: center;
|
||||
|
||||
&.pull-right {
|
||||
margin: 5px 6px 4px 0;
|
||||
}
|
||||
&.pull-left {
|
||||
margin: 5px 0 4px 6px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
&.navbar-toggle-img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
|
||||
border-width: 0;
|
||||
> img {
|
||||
border-radius: inherit;
|
||||
max-height: 35px;
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-bar {
|
||||
background-color: #FFF;
|
||||
border-radius: 0;
|
||||
width: 24px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
//move the icons to the line below
|
||||
@media only screen and (max-width: @screen-topbar-down) {
|
||||
.navbar:not(.navbar-collapse) {
|
||||
//.navbar-header.nav-brand , .navbar-header.navbar-buttons {
|
||||
.navbar-header {
|
||||
float: none !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ace-nav {
|
||||
display: block;
|
||||
float: none !important;
|
||||
text-align: center;
|
||||
|
||||
background-color: rgba(0,0,0,0.15);
|
||||
|
||||
border: 1px solid rgba(0,0,0,0.1);//@ace-nav-border;
|
||||
border-width: 1px 0 0;
|
||||
|
||||
letter-spacing: -3px;
|
||||
> li{
|
||||
display: inline-block;
|
||||
float:none !important;
|
||||
text-align: left;
|
||||
|
||||
letter-spacing: normal;
|
||||
|
||||
&:first-child {
|
||||
border-left: 1px solid @ace-nav-border;
|
||||
}
|
||||
&:last-child {
|
||||
border-right: 1px solid @ace-nav-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: @screen-mini-max) {
|
||||
.ace-nav > li > a {
|
||||
padding: 0 5px !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
//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;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
.enable_navbar_dropdown_positions() when(@enable-navbar-dropdowns = true) {
|
||||
|
||||
|
||||
@media only screen and (max-width: @screen-xs-max) {
|
||||
.ace-nav > li:nth-last-child(4) > .dropdown-menu.dropdown-menu-right {
|
||||
right: -100px;
|
||||
&:before, &:after {
|
||||
right: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.ace-nav > li:nth-last-child(3) > .dropdown-menu.dropdown-menu-right {
|
||||
right: -80px;
|
||||
&:before, &:after {
|
||||
right: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-menu.dropdown-close.dropdown-menu-right {
|
||||
right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: @screen-topbar-down-min) and (max-width: @screen-xs-max) {
|
||||
//if there's only one item except for user_info
|
||||
.navbar.navbar-collapse {
|
||||
.ace-nav > li:nth-last-child(2):nth-child(1) > .dropdown-menu.dropdown-menu-right,
|
||||
.ace-nav > li:nth-last-child(2):nth-child(2) > .dropdown-menu.dropdown-menu-right {
|
||||
left: auto;
|
||||
right: -60px;
|
||||
|
||||
&:before, &:after {
|
||||
right: 80px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: @screen-xs) {
|
||||
.ace-nav > li:nth-last-child(4) > .dropdown-menu.dropdown-menu-right {
|
||||
right: -120px;
|
||||
|
||||
&:before, &:after {
|
||||
right: 140px;
|
||||
}
|
||||
}
|
||||
.ace-nav > li:nth-last-child(3) > .dropdown-menu.dropdown-menu-right {
|
||||
right: -90px;
|
||||
|
||||
&:before, &:after {
|
||||
right: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
.ace-nav > li:nth-last-child(2) > .dropdown-menu.dropdown-menu-right {
|
||||
right: -50px;
|
||||
|
||||
&:before, &:after {
|
||||
right: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: @screen-topbar-down) {
|
||||
.ace-nav > li:nth-last-child(4) > .dropdown-menu.dropdown-menu-right {
|
||||
left: -10px;
|
||||
right: auto;
|
||||
|
||||
&:before, &:after {
|
||||
right: auto;
|
||||
left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.ace-nav > li:nth-last-child(3) > .dropdown-menu.dropdown-menu-right {
|
||||
left: -50px;
|
||||
right: auto;
|
||||
|
||||
&:before, &:after {
|
||||
left: 75px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.ace-nav > li:nth-last-child(2) > .dropdown-menu.dropdown-menu-right {
|
||||
left: -70px;
|
||||
right: auto;
|
||||
|
||||
&:before, &:after {
|
||||
left: 90px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @screen-mini-max) {
|
||||
//when there are only two items (apart from user menu)
|
||||
.ace-nav > li:nth-last-child(2) > .dropdown-menu.dropdown-menu-right {
|
||||
left: -110px;
|
||||
right: auto;
|
||||
|
||||
&:before, &:after {
|
||||
left: 130px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.ace-nav > li:nth-child(2):nth-last-child(2) > .dropdown-menu.dropdown-menu-right {
|
||||
left: -85px;
|
||||
right: auto;
|
||||
|
||||
&:before, &:after {
|
||||
left: 105px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.ace-nav > li:nth-child(1):nth-last-child(3) > .dropdown-menu.dropdown-menu-right {
|
||||
left: -35px;
|
||||
right: auto;
|
||||
|
||||
&:before, &:after {
|
||||
left: 55px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
//when there is only one item (apart from user menu)
|
||||
.ace-nav > li:nth-child(1):nth-last-child(2) > .dropdown-menu.dropdown-menu-right {
|
||||
left: -60px;
|
||||
right: auto;
|
||||
|
||||
&:before, &:after {
|
||||
left: 75px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.enable_navbar_dropdown_positions();
|
||||
@@ -0,0 +1,102 @@
|
||||
.user-menu > li > a {
|
||||
padding: 4px 12px;
|
||||
|
||||
> .@{icon} {
|
||||
margin-right: 6px;
|
||||
font-size: 120%;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
max-width: 100px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
|
||||
vertical-align: top;
|
||||
line-height: 15px;
|
||||
position: relative;
|
||||
top: 6px;
|
||||
|
||||
small {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.user_info_minified() {
|
||||
.user-menu {
|
||||
padding-top: 42px !important;
|
||||
}
|
||||
.nav-user-photo {
|
||||
margin-right: 0;
|
||||
}
|
||||
.user-info {
|
||||
position:absolute !important;
|
||||
margin-top: 40px;
|
||||
margin-left: 1px;
|
||||
right: 2px;
|
||||
|
||||
z-index: @zindex-navbar-fixed + 2;
|
||||
color: #777;
|
||||
font-size: @font-size-user-menu;
|
||||
width: 156px;
|
||||
max-width: 156px;
|
||||
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
height: 32px;
|
||||
line-height: 26px !important;
|
||||
|
||||
|
||||
display: none;
|
||||
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
|
||||
text-align: center;
|
||||
|
||||
vertical-align: none;
|
||||
line-height: normal;
|
||||
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.user-info > small {
|
||||
display: inline;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-topbar-down-min) and (max-width: @screen-qhd-width) , (max-width: @screen-topbar-down-small) {
|
||||
.navbar:not(.navbar-collapse) .navbar-buttons {
|
||||
.user_info_minified();
|
||||
}
|
||||
li.open .user-info {
|
||||
display: inline-block !important;
|
||||
//right: 2px;
|
||||
}
|
||||
}
|
||||
@media (max-width: @screen-topbar-down-small) {
|
||||
.navbar.navbar-collapse .navbar-buttons {
|
||||
.user_info_minified();
|
||||
}
|
||||
li.open .user-info {
|
||||
display: inline-block !important;
|
||||
right: 2px;
|
||||
}
|
||||
}
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
.user-min {
|
||||
.user_info_minified();
|
||||
|
||||
.user-info {
|
||||
right: -3px;//because .dropdown is a bit margined
|
||||
}
|
||||
&.open .user-info {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user