_menus.scss 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. // Menus
  2. .menu {
  3. @include shadow-variant(.05rem);
  4. background: $bg-color-light;
  5. border-radius: $border-radius;
  6. list-style: none;
  7. margin: 0;
  8. min-width: $control-width-xs;
  9. padding: $unit-2;
  10. transform: translateY($layout-spacing-sm);
  11. z-index: $zindex-3;
  12. &.menu-nav {
  13. background: transparent;
  14. box-shadow: none;
  15. }
  16. .menu-item {
  17. margin-top: 0;
  18. padding: 0 $unit-2;
  19. text-decoration: none;
  20. user-select: none;
  21. & > a {
  22. border-radius: $border-radius;
  23. color: inherit;
  24. display: block;
  25. margin: 0 (-$unit-2);
  26. padding: $unit-1 $unit-2;
  27. text-decoration: none;
  28. &:focus,
  29. &:hover {
  30. background: $secondary-color;
  31. color: $primary-color;
  32. }
  33. &:active,
  34. &.active {
  35. background: $secondary-color;
  36. color: $primary-color;
  37. }
  38. }
  39. .form-checkbox,
  40. .form-radio,
  41. .form-switch {
  42. margin: $unit-h 0;
  43. }
  44. & + .menu-item {
  45. margin-top: $unit-1;
  46. }
  47. }
  48. .menu-badge {
  49. float: right;
  50. padding: $unit-1 0;
  51. .btn {
  52. margin-top: -$unit-h;
  53. }
  54. }
  55. }