_navigation-top.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. .main-navigation {
  2. display: block;
  3. font-family: $font__headings;
  4. @include font-size(.825);
  5. font-weight: bold;
  6. text-transform: uppercase;
  7. letter-spacing: 1px;
  8. width: 100%;
  9. a,
  10. a:visited {
  11. color: $color__link;
  12. display: block;
  13. text-decoration: none;
  14. transition: 0.3s;
  15. }
  16. ul {
  17. display: none;
  18. margin: 0 0 1.6em;
  19. list-style: none;
  20. li {
  21. list-style: none;
  22. a {
  23. display: block;
  24. margin-top: .8em;
  25. padding-top: .8em;
  26. border-top: 1px solid $color__border-button;
  27. }
  28. &:first-of-type a {
  29. padding-top: 0;
  30. border-top: 0;
  31. }
  32. }
  33. ul {
  34. margin-bottom: 0;
  35. li:first-of-type a {
  36. margin-top: .8em;
  37. padding-top: .8em;
  38. border-top: 1px solid $color__border-button;
  39. }
  40. }
  41. ul a {
  42. padding-left: 1.6em;
  43. }
  44. ul ul a {
  45. padding-left: 3.2em;
  46. }
  47. ul ul ul a {
  48. padding-left: 4.8em;
  49. }
  50. ul ul ul ul a {
  51. padding-left: 6.4em;
  52. }
  53. }
  54. }
  55. /* Small menu. */
  56. .menu-toggle,
  57. .main-navigation.toggled ul {
  58. display: block;
  59. }
  60. .main-navigation.toggled > div {
  61. clear: both;
  62. background-color: white;
  63. margin-left: -5%;
  64. margin-right: -5%;
  65. padding-top: .4em;
  66. padding-bottom: .4em;
  67. & > ul > li {
  68. padding-left: 1.6em;
  69. padding-right: 1.6em;
  70. }
  71. }
  72. .menu-toggle {
  73. background-color: transparent;
  74. margin-right: 0;
  75. outline: 0;
  76. position: absolute;
  77. top: .8em;
  78. left: 100%;
  79. transform: translateX(-100%) translateX(-1.6em);
  80. &:hover,
  81. &:active,
  82. &:focus {
  83. background: transparent;
  84. }
  85. }
  86. .no-custom-header .menu-toggle {
  87. position: relative;
  88. top: auto;
  89. left: auto;
  90. margin-bottom: 1.6em;
  91. float: right;
  92. transform: none;
  93. }