.dropdown-menu { border: 0; padding: 8px 0; margin-top: 7px; background: @fl-body-bg; color: @fl-body-color; .box-shadow(0 2px 6px @fl-shadow-color); & > li > a { padding: 8px 15px 8px 40px; color: @fl-body-color; &:hover, &:focus { color: @fl-body-color; background-color: @fl-body-control-bg; } &.disabled { color: #aaa; cursor: default; &:hover, &:focus { color: #aaa; background: none; } } & .icon { float: left; margin-left: -25px; margin-top: 2px; font-size: 14px; } & .count { font-weight: bold; font-size: 12px; margin-left: 5px; } } & .divider { margin: 10px 0; background-color: @fl-body-control-bg; } } @media @tablet, @desktop, @desktop-hd { .dropdown-split { &.item-count-1 { & .btn { border-radius: @border-radius-base !important; } & .dropdown-toggle { display: none; } } & .dropdown-menu li:first-child { &, & + li.divider { display: none; } } } } // PHONES @media @phone { .dropdown-open { overflow: hidden; } .dropdown-menu { margin: 0; position: fixed; left: 0 !important; right: 0 !important; width: auto !important; bottom: -100vh; top: auto; padding: 0; z-index: @zindex-modal; display: block; max-height: 100vh; border-radius: 0; .box-shadow(0 2px 6px @fl-shadow-color); .translate3d(0, 0, 0); visibility: hidden; .transition(~"bottom 0.3s, visibility 0s 0.3s"); & > li > a { background: #fff; font-size: 16px; padding: 15px 20px 15px 50px; & .icon { font-size: 16px; margin-left: -30px; } } & .divider { margin: 0; } & > .active > a { color: #fff !important; } .open & { bottom: 0; visibility: visible; transition-delay: 0s; } } .dropdown-backdrop { background: fade(@fl-body-primary-color, 90%); opacity: 0; .transition(~"opacity 0.3s"); .open & { opacity: 1; } } } // ------------------------------------ // Mixins .expand-dropdown() { & .dropdown-toggle { display: none; } & .dropdown-menu { display: block; border: 0; width: auto; margin: 0; padding: 0; min-width: 0; float: none; position: static; background: none; .box-shadow(none); } } .nav-list() { & > li > a { padding: 8px 0 8px 30px; color: @fl-body-muted-color; &:hover { background: none; color: @link-hover-color; } & .icon { float: left; margin-left: -30px; margin-top: 1px; font-size: 15px; } } & > li.active > a { background: none; color: @fl-body-primary-color; font-weight: bold; } & > li.divider { background: none; } }