ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/build/less/dropdown.less

   1 /*
   2  * Component: Dropdown menus
   3  * -------------------------
   4  */
   5
   6 /*Dropdowns in general*/
   7 .dropdown-menu {
   8   box-shadow: none;
   9   border-color: #eee;
  10   > li > a {
  11     color: #777;
  12   }
  13   > li > a > .glyphicon,
  14   > li > a > .fa,
  15   > li > a > .ion {
  16     margin-right: 10px;
  17   }
  18   > li > a:hover {
  19     background-color: lighten(@gray, 5%);
  20     color: #333;
  21   }
  22   > .divider {
  23     background-color: #eee;
  24   }
  25 }
  26
  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
  32   > .dropdown-menu {
  33     > li {
  34       position: relative;
  35     }
  36     width: 280px;
  37     //Remove padding and margins
  38     padding: 0 0 0 0;
  39     margin: 0;
  40     top: 100%;
  41   }
  42   //Define header class
  43   > .dropdown-menu > li.header {
  44     .border-radius(4px; 4px; 0; 0);
  45     background-color: #ffffff;
  46     padding: 7px 10px;
  47     border-bottom: 1px solid #f4f4f4;
  48     color: #444444;
  49     font-size: 14px;
  50   }
  51
  52   //Define footer class
  53   > .dropdown-menu > li.footer > a {
  54     .border-radius(0; 0; 4px; 4px);
  55     font-size: 12px;
  56     background-color: #fff;
  57     padding: 7px 10px;
  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;
  63     }
  64     text-align: center;
  65     //Hover state
  66     &:hover {
  67       text-decoration: none;
  68       font-weight: normal;
  69     }
  70   }
  71
  72   //Clear inner menu padding and margins
  73   > .dropdown-menu > li .menu {
  74     max-height: 200px;
  75     margin: 0;
  76     padding: 0;
  77     list-style: none;
  78     overflow-x: hidden;
  79     > li > a {
  80       display: block;
  81       white-space: nowrap; /* Prevent text from breaking */
  82       border-bottom: 1px solid #f4f4f4;
  83       // Hove state
  84       &:hover {
  85         background: #f4f4f4;
  86         text-decoration: none;
  87       }
  88     }
  89   }
  90 }
  91
  92 //Notifications menu
  93 .navbar-nav > .notifications-menu {
  94   > .dropdown-menu > li .menu {
  95     // Links inside the menu
  96     > li > a {
  97       color: #444444;
  98       overflow: hidden;
  99       text-overflow: ellipsis;
 100       padding: 10px;
 101       // Icons inside the menu
 102       > .glyphicon,
 103       > .fa,
 104       > .ion {
 105         width: 20px;
 106       }
 107     }
 108
 109   }
 110 }
 111
 112 //Messages menu
 113 .navbar-nav > .messages-menu {
 114   //Inner menu
 115   > .dropdown-menu > li .menu {
 116     // Messages menu item
 117     > li > a {
 118       margin: 0;
 119       //line-height: 20px;
 120       padding: 10px 10px;
 121       // User image
 122       > div > img {
 123         margin: auto 10px auto auto;
 124         width: 40px;
 125         height: 40px;
 126       }
 127       // Message heading
 128       > h4 {
 129         padding: 0;
 130         margin: 0 0 0 45px;
 131         color: #444444;
 132         font-size: 15px;
 133         position: relative;
 134         // Small for message time display
 135         > small {
 136           color: #999999;
 137           font-size: 10px;
 138           position: absolute;
 139           top: 0;
 140           right: 0;
 141         }
 142       }
 143
 144       > p {
 145         margin: 0 0 0 45px;
 146         font-size: 12px;
 147         color: #888888;
 148       }
 149
 150       .clearfix();
 151
 152     }
 153
 154   }
 155 }
 156
 157 //Tasks menu
 158 .navbar-nav > .tasks-menu {
 159   > .dropdown-menu > li .menu {
 160     > li > a {
 161       padding: 10px;
 162
 163       > h3 {
 164         font-size: 14px;
 165         padding: 0;
 166         margin: 0 0 10px 0;
 167         color: #666666;
 168       }
 169
 170       > .progress {
 171         padding: 0;
 172         margin: 0;
 173       }
 174     }
 175   }
 176 }
 177
 178 //User menu
 179 .navbar-nav > .user-menu {
 180   > .dropdown-menu {
 181     .border-top-radius(0);
 182     padding: 1px 0 0 0;
 183     border-top-width: 0;
 184     width: 280px;
 185
 186     &,
 187     > .user-body {
 188       .border-bottom-radius(4px);
 189     }
 190     // Header menu
 191     > li.user-header {
 192       height: 175px;
 193       padding: 10px;
 194       text-align: center;
 195       // User image
 196       > img {
 197         z-index: 5;
 198         height: 90px;
 199         width: 90px;
 200         border: 3px solid;
 201         border-color: transparent;
 202         border-color: rgba(255, 255, 255, 0.2);
 203       }
 204       > p {
 205         z-index: 5;
 206         color: #fff;
 207         color: rgba(255, 255, 255, 0.8);
 208         font-size: 17px;
 209         //text-shadow: 2px 2px 3px #333333;
 210         margin-top: 10px;
 211         > small {
 212           display: block;
 213           font-size: 12px;
 214         }
 215       }
 216     }
 217
 218     // Menu Body
 219     > .user-body {
 220       padding: 15px;
 221       border-bottom: 1px solid #f4f4f4;
 222       border-top: 1px solid #dddddd;
 223       .clearfix();
 224       a {
 225         color: #444 !important;
 226         @media (max-width: @screen-sm-max) {
 227           background: #fff !important;
 228           color: #444 !important;
 229         }
 230       }
 231     }
 232
 233     // Menu Footer
 234     > .user-footer {
 235       background-color: #f9f9f9;
 236       padding: 10px;
 237       .clearfix();
 238       .btn-default {
 239         color: #666666;
 240         &:hover {
 241           @media (max-width: @screen-sm-max) {
 242             background-color: #f9f9f9;
 243           }
 244         }
 245       }
 246     }
 247   }
 248   .user-image {
 249     float: left;
 250     width: 25px;
 251     height: 25px;
 252     border-radius: 50%;
 253     margin-right: 10px;
 254     margin-top: -2px;
 255     @media (max-width: @screen-xs-max) {
 256       float: none;
 257       margin-right: 0;
 258       margin-top: -8px;
 259       line-height: 10px;
 260     }
 261   }
 262 }
 263
 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);
 269
 270 }
 271
 272 @keyframes flipInX {
 273   0% {
 274     transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 275     transition-timing-function: ease-in;
 276     opacity: 0;
 277   }
 278
 279   40% {
 280     transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 281     transition-timing-function: ease-in;
 282   }
 283
 284   60% {
 285     transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
 286     opacity: 1;
 287   }
 288
 289   80% {
 290     transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
 291   }
 292
 293   100% {
 294     transform: perspective(400px);
 295   }
 296 }
 297
 298 @-webkit-keyframes flipInX {
 299   0% {
 300     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 301     -webkit-transition-timing-function: ease-in;
 302     opacity: 0;
 303   }
 304
 305   40% {
 306     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 307     -webkit-transition-timing-function: ease-in;
 308   }
 309
 310   60% {
 311     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
 312     opacity: 1;
 313   }
 314
 315   80% {
 316     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
 317   }
 318
 319   100% {
 320     -webkit-transform: perspective(400px);
 321   }
 322 }
 323
 324 /* Fix dropdown menu in navbars */
 325 .navbar-custom-menu > .navbar-nav {
 326   > li {
 327     position: relative;
 328     > .dropdown-menu {
 329       position: absolute;
 330       right: 0;
 331       left: auto;
 332     }
 333   }
 334 }
 335
 336 @media (max-width: @screen-sm-max) {
 337   .navbar-custom-menu > .navbar-nav {
 338     float: right;
 339     > li {
 340       position: static;
 341       > .dropdown-menu {
 342         position: absolute;
 343         right: 5%;
 344         left: auto;
 345         border: 1px solid #ddd;
 346         background: #fff;
 347       }
 348     }
 349   }
 350 }