2 * Component: Dropdown menus
3 * -------------------------
6 /*Dropdowns in general*/
13 > li > a > .glyphicon,
19 background-color: lighten(@gray, 5%);
23 background-color: #eee;
27 //Navbar custom dropdown menu
28 .navbar-nav > .notifications-menu,
29 .navbar-nav > .messages-menu,
30 .navbar-nav > .tasks-menu {
31 //fix width and padding
37 //Remove padding and margins
43 > .dropdown-menu > li.header {
44 .border-radius(4px; 4px; 0; 0);
45 background-color: #ffffff;
47 border-bottom: 1px solid #f4f4f4;
53 > .dropdown-menu > li.footer > a {
54 .border-radius(0; 0; 4px; 4px);
56 background-color: #fff;
58 border-bottom: 1px solid #eeeeee;
59 color: #444 !important;
60 @media (max-width: @screen-sm-max) {
61 background: #fff !important;
62 color: #444 !important;
67 text-decoration: none;
72 //Clear inner menu padding and margins
73 > .dropdown-menu > li .menu {
81 white-space: nowrap; /* Prevent text from breaking */
82 border-bottom: 1px solid #f4f4f4;
86 text-decoration: none;
93 .navbar-nav > .notifications-menu {
94 > .dropdown-menu > li .menu {
95 // Links inside the menu
99 text-overflow: ellipsis;
101 // Icons inside the menu
113 .navbar-nav > .messages-menu {
115 > .dropdown-menu > li .menu {
116 // Messages menu item
123 margin: auto 10px auto auto;
134 // Small for message time display
158 .navbar-nav > .tasks-menu {
159 > .dropdown-menu > li .menu {
179 .navbar-nav > .user-menu {
181 .border-top-radius(0);
188 .border-bottom-radius(4px);
201 border-color: transparent;
202 border-color: rgba(255, 255, 255, 0.2);
207 color: rgba(255, 255, 255, 0.8);
209 //text-shadow: 2px 2px 3px #333333;
221 border-bottom: 1px solid #f4f4f4;
222 border-top: 1px solid #dddddd;
225 color: #444 !important;
226 @media (max-width: @screen-sm-max) {
227 background: #fff !important;
228 color: #444 !important;
235 background-color: #f9f9f9;
241 @media (max-width: @screen-sm-max) {
242 background-color: #f9f9f9;
255 @media (max-width: @screen-xs-max) {
264 /* Add fade animation to dropdown menus by appending
265 the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)*/
266 .open:not(.dropup) > .animated-dropdown-menu {
267 backface-visibility: visible !important;
268 .animation(flipInX .7s both);
274 transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
275 transition-timing-function: ease-in;
280 transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
281 transition-timing-function: ease-in;
285 transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
290 transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
294 transform: perspective(400px);
298 @-webkit-keyframes flipInX {
300 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
301 -webkit-transition-timing-function: ease-in;
306 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
307 -webkit-transition-timing-function: ease-in;
311 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
316 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
320 -webkit-transform: perspective(400px);
324 /* Fix dropdown menu in navbars */
325 .navbar-custom-menu > .navbar-nav {
336 @media (max-width: @screen-sm-max) {
337 .navbar-custom-menu > .navbar-nav {
345 border: 1px solid #ddd;