_menus.scss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  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. position: relative;
  20. text-decoration: 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. align-items: center;
  50. display: flex;
  51. height: 100%;
  52. position: absolute;
  53. right: 0;
  54. top: 0;
  55. .label {
  56. margin-right: $unit-2;
  57. }
  58. }
  59. }