mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-29 04:54:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improving dropdown style inside collapsible navbar

Browse Source
This commit is contained in:
TJ 2016-06-05 16:50:04 +05:30
parent 4b5dc8f068
commit f452a67fea
1 changed files with 55 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
less/_navbar.less
View File

@ -94,37 +94,59 @@
} }
// Dropdowns get custom display // Dropdowns get custom display
.open .dropdown-menu { .dropdown{
> .dropdown-header { .dropdown-toggle{
border: 0; .caret{
color: inherit; display:none;
} }
.divider { &:after{
border-bottom: 1px solid; content: 'keyboard_arrow_right';
opacity: 0.08; font-family: 'Material Icons';
} font-size: 1.5em;
> li > a { float:right;
color: inherit;
&:hover,
&:focus {
color: inherit;
background-color: transparent;
} }
} }
> .active > a { .dropdown-menu{
&, margin-left:20px;
&:hover,
&:focus {
color: inherit;
background-color: transparent;
}
} }
> .disabled > a { &.open{
&, .dropdown-toggle:after{
&:hover, content: 'keyboard_arrow_down';
&:focus { }
color: inherit; .dropdown-menu {
background-color: transparent; > .dropdown-header {
border: 0;
color: inherit;
}
.divider {
border-bottom: 1px solid;
opacity: 0.08;
}
> li > a {
color: inherit;
font-size: inherit;
&:hover,
&:focus {
color: inherit;
background-color: transparent;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: inherit;
background-color: transparent;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: inherit;
background-color: transparent;
}
}
} }
} }
} }
@ -197,6 +219,11 @@
} }
.dropdown-menu { .dropdown-menu {
border-radius: @border-radius-base; border-radius: @border-radius-base;
@media (max-width: @grid-float-breakpoint-max) {
.dropdown-header{
background-color: lighten(@variation-color,5%);
}
}
li > a { li > a {
font-size: @mdb-dropdown-font-size; font-size: @mdb-dropdown-font-size;
padding: 13px 16px; padding: 13px 16px;