dropdowns.less 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. //
  2. // Dropdowns
  3. // --------------------------------------------------
  4. // Dropdowns style
  5. .dropdown-menu {
  6. border: none;
  7. border-radius: @dropdown-border-radius;
  8. .shadow-8dp();
  9. }
  10. .dropdown-menu {
  11. &>li {
  12. &>a {
  13. border-bottom: 1px solid @dropdown-link-border;
  14. padding-top: @padding-base-vertical;
  15. padding-bottom: @padding-base-vertical;
  16. font-size: @font-size-nav;
  17. font-weight: @weight-light;
  18. &>.material-icons {
  19. margin-right: 8px;
  20. top: 1px;
  21. font-size: 22px;
  22. }
  23. &>.badge {
  24. float: right;
  25. position: relative;
  26. top: (@font-size-large - @font-size-base) / 2 + 1px;
  27. }
  28. }
  29. &:nth-last-of-type(1) {
  30. &>a {
  31. border-bottom: none;
  32. }
  33. }
  34. }
  35. }
  36. .dropdown-space {
  37. padding: 7px 20px;
  38. }
  39. .dropdown-footer {
  40. background: @dropdown-footer-bg;
  41. border-top: 1px solid @dropdown-footer-border;
  42. border-radius: 0px 0px @dropdown-border-radius @dropdown-border-radius;
  43. padding: 7px 20px;
  44. }
  45. // Upscale dropdown on small displays
  46. @media (max-width: @screen-sm-max) {
  47. .btn-group {
  48. position: static;
  49. .dropdown-menu {
  50. border-radius: 0px;
  51. margin-top: ceil((@line-height-computed + @padding-base-vertical * 2) * 1.2);
  52. top: auto;
  53. width: 100%;
  54. &>li>a {
  55. padding-top: @padding-large-vertical;
  56. padding-bottom: @padding-large-vertical;
  57. }
  58. }
  59. }
  60. }
  61. // User dropdown
  62. .user-dropdown {
  63. width: 300px;
  64. padding: 0px;
  65. .user-preview, .guest-preview {
  66. border-bottom: 1px solid @dropdown-divider-bg;
  67. margin-bottom: 8px;
  68. padding: 12px 20px;
  69. .media-heading {
  70. margin-top: @line-height-computed / 3;
  71. }
  72. .editable-avatar {
  73. margin-right: 4px;
  74. }
  75. .row {
  76. margin-top: @line-height-computed;
  77. div:first-child {
  78. padding-right: 4px;
  79. }
  80. div:last-child {
  81. padding-left: 4px;
  82. }
  83. }
  84. }
  85. .guest-preview {
  86. border-bottom: 0px;
  87. margin-bottom: 4px;
  88. }
  89. .dropdown-footer {
  90. margin-top: 8px;
  91. }
  92. &>li:nth-last-of-type(2) {
  93. &>a {
  94. border-bottom: none;
  95. }
  96. }
  97. }