git.roojs.org Git - bootswatch/blob - AdminLTE-master/less/dropdown.less

   1 /*
   2     Dropdown menus
   3 ----------------------------
   4 */
   5
   6 /*Dropdowns in general*/
   7 .dropdown-menu {
   8     -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.1);
   9     -moz-box-shadow: 0px 3px 6px rgba(0,0,0,0.1);
  10     box-shadow: 0px 3px 6px rgba(0,0,0,0.1);
  11     z-index: 2300;
  12     > li > a > .glyphicon,
  13     > li > a > .fa,
  14     > li > a > .ion{
  15         margin-right: 10px;
  16     }
  17     > li > a:hover {
  18         background-color: @light-blue;
  19         color: #f9f9f9;
  20     }
  21 }
  22
  23 /*Drodown in navbars*/
  24 .skin-blue .navbar {
  25     .dropdown-menu > li > a{
  26         color: #444444;
  27     }
  28 }
  29
  30 /*
  31     Navbar custom dropdown menu
  32 ------------------------------------
  33 */
  34 .navbar-nav > .notifications-menu,
  35 .navbar-nav > .messages-menu,
  36 .navbar-nav > .tasks-menu {
  37     //fix width and padding
  38     > .dropdown-menu {
  39         width: 280px;
  40         //Remove padding and margins
  41         padding: 0 0 0 0!important;
  42         margin: 0!important;
  43         top: 100%;
  44         border: 1px solid #dfdfdf;
  45         .border-radius(4px)!important;
  46     }
  47     //Define header class
  48     > .dropdown-menu > li.header {
  49         .border-radius(4px; 4px; 0; 0);
  50         background-color: #ffffff;
  51         padding: 7px 10px;
  52         border-bottom: 1px solid #f4f4f4;
  53         color: #444444;
  54         font-size: 14px;
  55         &:after {
  56             // Add arrow to the top (you can change the width using border-width)
  57             bottom: 100%;
  58             left: 92%;
  59             border: solid transparent;
  60             content: " ";
  61             height: 0;
  62             width: 0;
  63             position: absolute;
  64             pointer-events: none;
  65             border-color: rgba(255, 255, 255, 0);
  66             border-bottom-color: #ffffff;
  67             border-width: 7px;
  68             margin-left: -7px;
  69         }
  70     }
  71
  72
  73     //Define footer class
  74     > .dropdown-menu > li.footer > a {
  75         .border-radius(0px; 0px; 4px; 4px);
  76         font-size: 12px;
  77         background-color: #f4f4f4;
  78         padding: 7px 10px;
  79         border-bottom: 1px solid #eeeeee;
  80         color: #444444;
  81         text-align: center;
  82         //Hover state
  83         &:hover {
  84             background: #f4f4f4;
  85             text-decoration: none;
  86             font-weight: normal;
  87         }
  88     }
  89
  90     //Clear inner menu padding and margins
  91     > .dropdown-menu > li .menu {
  92         > li > a {
  93             display: block;
  94             white-space: nowrap; /* Prevent text from breaking */
  95             border-bottom: 1px solid #f4f4f4;
  96             // Hove state
  97             &:hover {
  98                 background: #f6f6f6;
  99                 text-decoration: none;
 100             }
 101         }
 102         margin: 0;
 103         padding: 0;
 104         list-style: none;
 105         overflow-x: hidden;
 106
 107     }
 108 }
 109
 110 //Notifications menu
 111 .navbar-nav > .notifications-menu {
 112     > .dropdown-menu > li .menu {
 113         // Links inside the menu
 114         > li > a {
 115             font-size: 12px;
 116             color: #444444;
 117
 118             // Icons inside the menu
 119             > .glyphicon,
 120             > .fa,
 121             > .ion {
 122                 font-size: 20px;
 123                 width: 50px;
 124                 text-align: center;
 125                 padding: 15px 0px;
 126                 margin-right: 5px;
 127                 /* Default background and font colors */
 128                 background: @aqua;
 129                 color: #f9f9f9; /* Fallback for browsers that doesn't support rgba */
 130                 color: rgba(255, 255, 255, 0.7);
 131                 // Icon background variations
 132                 &.danger {
 133                     background: @red;
 134                 }
 135                 &.warning {
 136                     background: @yellow;
 137                 }
 138                 &.success {
 139                     background: @green;
 140                 }
 141                 &.info {
 142                     background: @aqua;
 143                 }
 144             }
 145         }
 146
 147     }
 148 }
 149
 150 //Messages menu
 151 .navbar-nav > .messages-menu {
 152     //Inner menu
 153     > .dropdown-menu > li .menu {
 154         // Messages menu item
 155         > li > a {
 156             margin: 0px;
 157             line-height: 20px;
 158             padding: 10px 5px 10px 5px;
 159             .border-radius(4px);
 160             // User image
 161             > div > img {
 162                 margin: auto 10px auto auto;
 163                 width: 40px;
 164                 height: 40px;
 165                 border: 1px solid #dddddd;
 166             }
 167             // Message heading
 168             > h4 {
 169                 padding: 0;
 170                 margin: 0 0 0 45px;
 171                 color: #444444;
 172                 font-size: 15px;
 173                 // Small for message time display
 174                 > small {
 175                     color: #999999;
 176                     font-size: 10px;
 177                     float: right;
 178                 }
 179             }
 180
 181             > p {
 182                 margin: 0 0 0 45px;
 183                 font-size: 12px;
 184                 color: #888888;
 185             }
 186
 187             .clearfix();
 188
 189         }
 190
 191     }
 192 }
 193 //Tasks menu
 194 .navbar-nav > .tasks-menu {
 195     > .dropdown-menu > li .menu {
 196         > li > a {
 197             padding: 10px;
 198
 199             > h3 {
 200                 font-size: 14px;
 201                 padding: 0;
 202                 margin: 0 0 10px 0;
 203                 color: #666666;
 204             }
 205
 206             > .progress {
 207                 padding: 0;
 208                 margin: 0;
 209             }
 210         }
 211     }
 212 }
 213 //User menu
 214 .navbar-nav > .user-menu {
 215     > .dropdown-menu {
 216         .border-radius(0);
 217         padding: 1px 0 0 0;
 218         border-top-width: 0;
 219         width: 280px;
 220         // Add arrow to the top (you can change the width by changing the border-width)
 221         &:after {
 222             bottom: 100%;
 223             right: 10px;
 224             border: solid transparent;
 225             content: " ";
 226             height: 0;
 227             width: 0;
 228             position: absolute;
 229             pointer-events: none;
 230             border-color: rgba(255, 255, 255, 0);
 231             border-bottom-color: #ffffff;
 232             border-width: 10px;
 233             margin-left: -10px;
 234         }
 235         // Header menu
 236         > li.user-header {
 237             height: 175px;
 238             padding: 10px;
 239             // Default background color. You can add any .bg-* class to
 240             //   the li element to change the background
 241             background: @light-blue;
 242             text-align: center;
 243             // User image
 244             > img {
 245                 z-index: 5;
 246                 height: 90px;
 247                 width: 90px;
 248                 border: 8px solid;
 249                 border-color: transparent;
 250                 border-color: rgba(255, 255, 255, 0.2);
 251             }
 252             > p {
 253                 z-index: 5;
 254                 color: #f9f9f9;
 255                 color: rgba(255, 255, 255, 0.8);
 256                 font-size: 17px;
 257                 text-shadow: 2px 2px 3px #333333;
 258                 margin-top: 10px;
 259                 > small {
 260                     display: block;
 261                     font-size: 12px;
 262                 }
 263             }
 264         }
 265
 266         // Menu Body
 267         > li.user-body {
 268             padding: 15px;
 269             border-bottom: 1px solid #f4f4f4;
 270             border-top: 1px solid #dddddd;
 271             .clearfix();
 272             > div > a {
 273                 color: @blue;
 274             }
 275         }
 276
 277         // Menu Footer
 278         > li.user-footer {
 279             background-color: @body-bg;
 280             padding: 10px;
 281             .clearfix();
 282             .btn-default {
 283                 color: #666666;
 284             }
 285         }
 286
 287     }
 288 }
 289
 290 /* Add fade animation to dropdown menus */
 291 .open > .dropdown-menu {
 292     animation-name: fadeAnimation;
 293     animation-duration:.7s;
 294     animation-iteration-count: 1;
 295     animation-timing-function: ease;
 296     animation-fill-mode: forwards;
 297
 298     -webkit-animation-name: fadeAnimation;
 299     -webkit-animation-duration:.7s;
 300     -webkit-animation-iteration-count: 1;
 301     -webkit-animation-timing-function: ease;
 302     -webkit-animation-fill-mode: forwards;
 303
 304     -moz-animation-name: fadeAnimation;
 305     -moz-animation-duration:.7s;
 306     -moz-animation-iteration-count: 1;
 307     -moz-animation-timing-function: ease;
 308     -moz-animation-fill-mode: forwards;
 309 }
 310 @keyframes fadeAnimation {
 311     from {
 312         opacity: 0;
 313         top: 120%;
 314     }
 315     to {
 316         opacity: 1;
 317         top: 100%
 318     }
 319 }
 320 @-webkit-keyframes fadeAnimation {
 321     from {
 322         opacity: 0;
 323         top: 120%;
 324     }
 325     to {
 326         opacity: 1;
 327         top: 100%;
 328     }
 329 }
 330
 331 /* Fix dropdown menu for small screens to display correctly on small screens */
 332 @media screen and (max-width: @screen-sm) {
 333     .navbar-nav {
 334         > .notifications-menu,
 335         > .user-menu,
 336         > .tasks-menu,
 337         > .messages-menu {
 338             > .dropdown-menu {
 339                 position: absolute;
 340                 top: 100%;
 341                 right: 0;
 342                 left: auto;
 343                 border-right: 1px solid #dddddd;
 344                 border-bottom: 1px solid #dddddd;
 345                 border-left: 1px solid #dddddd;
 346                 background: #ffffff;
 347             }
 348         }
 349     }
 350 }
 351
 352 /* Fix menu positions on xs screens to appear correctly and fully */
 353 @media screen and (max-width: @screen-xs) {
 354     .navbar-nav {
 355         > .notifications-menu,
 356         > .tasks-menu,
 357         > .messages-menu {
 358             > .dropdown-menu > li.header {
 359                 /* Remove arrow from the top */
 360                 &:after {
 361                     border-width: 0px!important;
 362                 }
 363             }
 364         }
 365     }
 366
 367     .navbar-nav {
 368         > .tasks-menu {
 369             > .dropdown-menu {
 370                 position: absolute;
 371                 right: -120px;
 372                 left: auto;
 373             }
 374         }
 375
 376         > .notifications-menu {
 377             > .dropdown-menu {
 378                 position: absolute;
 379                 right: -170px;
 380                 left: auto;
 381             }
 382         }
 383
 384         > .messages-menu {
 385             > .dropdown-menu {
 386                 position: absolute;
 387                 right: -210px;
 388                 left: auto;
 389             }
 390         }
 391     }
 392 }