dropdowns.less 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. //
  2. // Dropdowns
  3. // --------------------------------------------------
  4. // Unify .btn-link appearance with anchors
  5. .dropdown-menu>li>a,
  6. .dropdown-menu>li>.btn-link {
  7. display: block;
  8. border: none;
  9. clear: both;
  10. float: none;
  11. padding: 4px 20px;
  12. width: 100%;
  13. color: @dropdown-link-color;
  14. font-weight: normal;
  15. line-height: @line-height-base;
  16. text-align: left;
  17. white-space: nowrap;
  18. &:hover, &:focus {
  19. background-color: @dropdown-link-hover-bg;
  20. color: @dropdown-link-hover-color;
  21. text-decoration: none;
  22. }
  23. // Set material icons in dropdown menus
  24. .material-icon {
  25. margin: -2px 0px;
  26. margin-right: @line-height-computed * .35;
  27. position: relative;
  28. bottom: 1px;
  29. font-size: 18px;
  30. }
  31. .badge {
  32. float: right;
  33. }
  34. }
  35. // Bump min dropdown width to 210px
  36. .dropdown-menu {
  37. width: 210px;
  38. }
  39. // Dropdown footer
  40. .dropdown-menu .dropdown-footer {
  41. padding: 6px 20px;
  42. }
  43. // Dropdown buttons container
  44. .dropdown-menu .dropdown-buttons {
  45. padding: 2px 20px;
  46. .btn {
  47. margin: 4px 0px;
  48. }
  49. }
  50. // Always displayed on mobile dropdown
  51. .mobile-dropdown, .compact-nav {
  52. position: static;
  53. margin: 0px;
  54. overflow: auto;
  55. &.open {
  56. margin-bottom: @line-height-computed;
  57. }
  58. }
  59. .compact-nav.open {
  60. margin-top: @line-height-computed * -1;
  61. }
  62. .mobile-dropdown.open>.dropdown-menu, .compact-nav.open>.dropdown-menu {
  63. border: none;
  64. border-radius: 0;
  65. .box-shadow(none);
  66. display: block;
  67. margin: 0px;
  68. width: 100%;
  69. position: static;
  70. }
  71. // Guest menu
  72. .user-dropdown .guest-preview {
  73. text-align: center;
  74. .row {
  75. margin: 0px;
  76. }
  77. }
  78. // User menu
  79. .navbar .user-dropdown {
  80. width: 240px;
  81. }
  82. .user-dropdown .dropdown-header {
  83. padding: 6px 20px;
  84. font-size: @font-size-large;
  85. strong {
  86. font-weight: normal;
  87. }
  88. }