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;
padding: 7px 10px;
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;
//Hover state
&:hover {
@ -217,8 +221,12 @@
border-bottom: 1px solid #f4f4f4;
border-top: 1px solid #dddddd;
.clearfix();
> div > a {
color: @light-blue;
a {
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 {
float: right;
> li {
@ -325,23 +333,9 @@
position: absolute;
right: 5%;
left: auto;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
border: 1px solid #ddd;
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;
float: right;
@media (max-width: @screen-sm-max) {
a {
a {
color: inherit;
background: transparent;
}

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

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

36
dist/css/AdminLTE.css vendored
View File

@ -625,9 +625,17 @@ a:focus {
background-color: #fff;
padding: 7px 10px;
border-bottom: 1px solid #eeeeee;
color: #444444;
color: #444!important;
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 > .messages-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 {
clear: both;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-body > div > a {
color: #3c8dbc;
.navbar-nav > .user-menu > .dropdown-menu > .user-body a {
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 {
background-color: #f9f9f9;
@ -853,7 +867,7 @@ a:focus {
right: 0;
left: auto;
}
@media (max-width: 768px) {
@media (max-width: 991px) {
.navbar-custom-menu > .navbar-nav {
float: right;
}
@ -864,22 +878,10 @@ a:focus {
position: absolute;
right: 5%;
left: auto;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
border: 1px solid #ddd;
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
* ---------------

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

File diff suppressed because one or more lines are too long