_aside.scss 682 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. .aside-menu {
  2. display: flex;
  3. flex-direction: column;
  4. gap: $gap-2;
  5. }
  6. .aside-menu-link,
  7. .aside-menu-title {
  8. color: inherit;
  9. display: block;
  10. padding: $gap-1 $gap-2;
  11. margin: 0 (-$gap-2);
  12. &.active {
  13. font-weight: $font-weight-medium;
  14. color: $color-headers;
  15. }
  16. }
  17. .aside-menu-link {
  18. &:hover {
  19. background: rgba($color-primary, .04);
  20. color: $color-primary;
  21. }
  22. }
  23. .aside-menu-children {
  24. padding-left: $gap-4;
  25. display: flex;
  26. flex-direction: column;
  27. gap: $gap-2;
  28. position: relative;
  29. &:after {
  30. content: '';
  31. position: absolute;
  32. top: $gap-2;
  33. bottom: $gap-2;
  34. border-left: 1px solid $color-border-light;
  35. left: $gap-2;
  36. }
  37. }