github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

Fixed dropdown links in navbar on small screens issue

pull/247/head
Abdullah Almsaeed 2015-02-20 13:53:11 -05:00
parent cab4b05331
commit e1fd521e38
5 changed files with 47 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
build/less/dropdown.less
View File

@ -62,7 +62,11 @@
background-color: #fff; background-color: #fff;
padding: 7px 10px; padding: 7px 10px;
border-bottom: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee;
color: #444444; color: #444!important;
@media (max-width: @screen-sm-max) {
background: #fff!important;
color: #444!important;
}
text-align: center; text-align: center;
//Hover state //Hover state
&:hover { &:hover {
@ -217,8 +221,12 @@
border-bottom: 1px solid #f4f4f4; border-bottom: 1px solid #f4f4f4;
border-top: 1px solid #dddddd; border-top: 1px solid #dddddd;
.clearfix(); .clearfix();
> div > a { a {
color: @light-blue; color: #444 !important;
@media (max-width: @screen-sm-max) {
background: #fff !important;
color: #444 !important;
}
} }
} }
@ -316,7 +324,7 @@
} }
} }
} }
@media (max-width: @screen-sm) { @media (max-width: @screen-sm-max) {
.navbar-custom-menu > .navbar-nav { .navbar-custom-menu > .navbar-nav {
float: right; float: right;
> li { > li {
@ -325,23 +333,9 @@
position: absolute; position: absolute;
right: 5%; right: 5%;
left: auto; left: auto;
border-right: 1px solid #ddd; border: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
background: #fff; background: #fff;
} }
} }
} }
} }
/* Fix menu positions on xs screens to appear correctly and fully */
@media (max-width: @screen-sm) {
.navbar-nav {
> li > .dropdown-menu {
/* Remove arrow from the top */
&:after, & > li.header:after {
border-width: 0px!important;
}
}
}
}

2
build/less/header.less
View File

@ -44,7 +44,7 @@
margin-right: 5px; margin-right: 5px;
float: right; float: right;
@media (max-width: @screen-sm-max) { @media (max-width: @screen-sm-max) {
a { a {
color: inherit; color: inherit;
background: transparent; background: transparent;
} }

18
build/less/skins/skin-blue.less
View File

@ -2,7 +2,6 @@
* Skin: Blue * Skin: Blue
* ---------- * ----------
*/ */
@import "../../bootstrap-less/mixins.less"; @import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less"; @import "../../bootstrap-less/variables.less";
@import "../variables.less"; @import "../variables.less";
@ -19,11 +18,11 @@
background-color: darken(@light-blue, 5%); background-color: darken(@light-blue, 5%);
} }
} }
@media(max-width: @screen-header-collapse) { @media (max-width: @screen-header-collapse) {
.dropdown-menu { .dropdown-menu {
li { li {
&.divider { &.divider {
background-color: rgba(255,255,255,0.1); background-color: rgba(255, 255, 255, 0.1);
} }
a { a {
color: #fff; color: #fff;
@ -83,7 +82,7 @@
} }
// Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color) // Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color)
.wrapper , .wrapper,
.main-sidebar, .main-sidebar,
.left-side { .left-side {
background: @sidebar-dark-bg; background: @sidebar-dark-bg;
@ -98,7 +97,9 @@
// skin blue treeview-menu // skin blue treeview-menu
.treeview-menu { .treeview-menu {
> li { > li {
> a {color: @sidebar-dark-submenu-color;} > a {
color: @sidebar-dark-submenu-color;
}
&.active > a, > a:hover { &.active > a, > a:hover {
color: @sidebar-dark-submenu-hover-color; color: @sidebar-dark-submenu-hover-color;
} }
@ -116,9 +117,9 @@
height: 35px; height: 35px;
.transition(all @transition-speed @transition-fn); .transition(all @transition-speed @transition-fn);
} }
input[type="text"]{ input[type="text"] {
color: #666; color: #666;
.border-radius(2px, 0, 2px, 0)!important; .border-radius(2px, 0, 2px, 0) !important;
&:focus, &:focus + .input-group-btn .btn { &:focus, &:focus + .input-group-btn .btn {
background-color: #fff; background-color: #fff;
color: #666; color: #666;
@ -129,10 +130,11 @@
} }
.btn { .btn {
color: #999; color: #999;
.border-radius(0, 2px, 0, 2px)!important; .border-radius(0, 2px, 0, 2px) !important;
} }
} }
} }
.skin-blue.layout-top-nav .main-header > .logo { .skin-blue.layout-top-nav .main-header > .logo {
.logo-variant(@light-blue); .logo-variant(@light-blue);
} }

36
dist/css/AdminLTE.css vendored
View File

@ -625,9 +625,17 @@ a:focus {
background-color: #fff; background-color: #fff;
padding: 7px 10px; padding: 7px 10px;
border-bottom: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee;
color: #444444; color: #444!important;
text-align: center; text-align: center;
} }
@media (max-width: 991px) {
.navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
.navbar-nav > .messages-menu > .dropdown-menu > li.footer > a,
.navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
background: #fff!important;
color: #444!important;
}
}
.navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a:hover, .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a:hover,
.navbar-nav > .messages-menu > .dropdown-menu > li.footer > a:hover, .navbar-nav > .messages-menu > .dropdown-menu > li.footer > a:hover,
.navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a:hover { .navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a:hover {
@ -761,8 +769,14 @@ a:focus {
.navbar-nav > .user-menu > .dropdown-menu > .user-body:after { .navbar-nav > .user-menu > .dropdown-menu > .user-body:after {
clear: both; clear: both;
} }
.navbar-nav > .user-menu > .dropdown-menu > .user-body > div > a { .navbar-nav > .user-menu > .dropdown-menu > .user-body a {
color: #3c8dbc; color: #444 !important;
}
@media (max-width: 991px) {
.navbar-nav > .user-menu > .dropdown-menu > .user-body a {
background: #fff !important;
color: #444 !important;
}
} }
.navbar-nav > .user-menu > .dropdown-menu > .user-footer { .navbar-nav > .user-menu > .dropdown-menu > .user-footer {
background-color: #f9f9f9; background-color: #f9f9f9;
@ -853,7 +867,7 @@ a:focus {
right: 0; right: 0;
left: auto; left: auto;
} }
@media (max-width: 768px) { @media (max-width: 991px) {
.navbar-custom-menu > .navbar-nav { .navbar-custom-menu > .navbar-nav {
float: right; float: right;
} }
@ -864,22 +878,10 @@ a:focus {
position: absolute; position: absolute;
right: 5%; right: 5%;
left: auto; left: auto;
border-right: 1px solid #ddd; border: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
background: #fff; background: #fff;
} }
} }
/* Fix menu positions on xs screens to appear correctly and fully */
@media (max-width: 768px) {
.navbar-nav > li > .dropdown-menu {
/* Remove arrow from the top */
}
.navbar-nav > li > .dropdown-menu:after,
.navbar-nav > li > .dropdown-menu > li.header:after {
border-width: 0px!important;
}
}
/* /*
* Component: Form * Component: Form
* --------------- * ---------------

2
dist/css/AdminLTE.min.css vendored
View File

File diff suppressed because one or more lines are too long