menu.less 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. .ui-grid-menu-button {
  2. z-index: 2;
  3. position: absolute;
  4. right: 0;
  5. top: 0;
  6. background: @headerBackgroundColor;
  7. border: @gridBorderWidth solid @borderColor;
  8. cursor: pointer;
  9. height: 31px;
  10. font-weight: normal;
  11. }
  12. .ui-grid-menu-button .ui-grid-icon-container {
  13. margin-top: 3px;
  14. }
  15. .ui-grid-menu-button .ui-grid-menu {
  16. right: 0;
  17. .ui-grid-menu-mid {
  18. overflow: scroll;
  19. max-height: 300px;
  20. border: @gridBorderWidth solid @borderColor;
  21. }
  22. }
  23. .ui-grid-menu {
  24. z-index: 2; // So it shows up over grid canvas
  25. position: absolute;
  26. padding: 0 10px 20px 10px;
  27. cursor: pointer;
  28. box-sizing: border-box;
  29. }
  30. .ui-grid-menu .ui-grid-menu-inner {
  31. background: @headerBackgroundColor;
  32. border: @gridBorderWidth solid @borderColor;
  33. position: relative;
  34. white-space: nowrap;
  35. .rounded(@gridBorderRadius);
  36. .box-shadow(e("0 10px 20px rgba(0, 0, 0, 0.2), inset 0 12px 12px -14px rgba(0, 0, 0, 0.2)"));
  37. // Small hidden close button that only appears when focused.
  38. .ui-grid-menu-close-button {
  39. position: absolute;
  40. right: 0px;
  41. top: 0px;
  42. #ui-grid-twbs > .btn();
  43. #ui-grid-twbs > .button-size(1px; 1px; 10px; 1; 2px);
  44. #ui-grid-twbs > .button-variant(transparent, transparent, transparent);
  45. > i {
  46. opacity: 0.75;
  47. color: black;
  48. }
  49. }
  50. }
  51. .ui-grid-menu .ui-grid-menu-inner ul {
  52. margin: 0;
  53. padding: 0;
  54. list-style-type: none;
  55. li {
  56. padding: 0px;
  57. button {
  58. min-width: 100%;
  59. padding: 8px;
  60. text-align: left;
  61. background: transparent;
  62. border: none;
  63. // Show a shadow when hovering over a menu item
  64. &:hover,
  65. &:focus {
  66. // background-color: negation(@headerBackgroundColor, #fff);
  67. .inner-shadow(@vertical: 0, @blur: 14px, @alpha: 0.2);
  68. }
  69. &.ui-grid-menu-item-active {
  70. .inner-shadow(@vertical: 0, @blur: 14px, @alpha: 0.2);
  71. background-color: @selectedColor;
  72. }
  73. }
  74. }
  75. // Show a bottom border on all but the last menu item
  76. li:not(:last-child) > button {
  77. border-bottom: @gridBorderWidth solid @borderColor;
  78. }
  79. }