menu.styl 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. // Menu
  2. // --------------------------------------------------
  3. .menu {
  4. margin-top: 20px;
  5. padding-left: 0;
  6. text-align: center;
  7. }
  8. .menu-item {
  9. display: inline-block;
  10. list-style: none;
  11. margin: 0 10px;
  12. +mobile() {
  13. display: block;
  14. margin-top: 10px;
  15. &.menu-item-search {
  16. display: none;
  17. }
  18. }
  19. a, span.exturl {
  20. border-bottom: 0;
  21. display: block;
  22. font-size: $font-size-smaller;
  23. transition-property: border-color;
  24. the-transition();
  25. // To prevent hover on external links with touch devices after click.
  26. @media (hover: none) {
  27. &:hover {
  28. border-bottom-color: transparent !important;
  29. }
  30. }
  31. }
  32. .fa, .fab, .far, .fas {
  33. margin-right: 8px;
  34. }
  35. .badge {
  36. display: inline-block;
  37. font-weight: bold;
  38. line-height: 1;
  39. margin-left: .35em;
  40. margin-top: .35em;
  41. text-align: center;
  42. white-space: nowrap;
  43. +mobile() {
  44. float: right;
  45. margin-left: 0;
  46. }
  47. }
  48. }
  49. .menu-item-active a {
  50. background: var(--menu-item-bg-color);
  51. }
  52. .use-motion .menu-item {
  53. opacity: 0;
  54. }