_site-mobile-nav-side.scss 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. // Updates the Mobile Navigation to be next to the site title.
  2. @include media(mobile-only) {
  3. .mobile-nav-side {
  4. .has-menu {
  5. &:before,
  6. &:after {
  7. content: none;
  8. }
  9. position: relative;
  10. display: grid;
  11. grid-gap: 2px;
  12. grid-template-areas:
  13. "site-logo site-logo"
  14. "social-navigation main-navigation";
  15. &.has-title-and-tagline {
  16. grid-template-areas:
  17. "site-logo site-logo"
  18. "site-title main-navigation"
  19. "site-description main-navigation"
  20. "social-navigation social-navigation";
  21. .site-title {
  22. grid-area: site-title;
  23. align-self: end;
  24. }
  25. .site-description {
  26. grid-area: site-description;
  27. align-self: start;
  28. }
  29. }
  30. & > *:not(.site-logo) {
  31. margin: 0;
  32. }
  33. .site-logo {
  34. grid-area: site-logo;
  35. justify-self: center;
  36. margin: $baseline-unit 0;
  37. }
  38. .social-navigation {
  39. grid-area: social-navigation;
  40. align-self: center;
  41. }
  42. .main-navigation {
  43. grid-area: main-navigation;
  44. //align-self: center;
  45. }
  46. }
  47. .site-header #site-navigation.main-navigation {
  48. display: grid;
  49. grid-template-areas:
  50. "menu-toggle cart-toggle"
  51. "dropdown-menu dropdown-menu";
  52. margin: 0;
  53. justify-self: end;
  54. //text-align: right;
  55. #toggle-menu {
  56. grid-area: menu-toggle;
  57. }
  58. #toggle-cart[for="woocommerce-toggle"] {
  59. grid-area: cart-toggle;
  60. }
  61. #toggle-cart[for="woocommerce-toggle"].button,
  62. #toggle-menu {
  63. padding: (1.5 * $baseline-unit);
  64. display: inline-block;
  65. text-align: center;
  66. justify-self: end;
  67. font-size: #{map-deep-get($config-global, "font", "size", "xs" )};
  68. }
  69. #toggle-cart[for="woocommerce-toggle"] {
  70. margin-top: $baseline-unit;
  71. }
  72. #toggle-cart[for="woocommerce-toggle"].button svg {
  73. margin-top: -2px;
  74. }
  75. .main-menu-container {
  76. grid-area: dropdown-menu;
  77. margin-top: $baseline-unit;
  78. position: absolute;
  79. z-index: 100;
  80. right: 2 * $baseline-unit;
  81. left: 2 * $baseline-unit;
  82. background: #{map-deep-get($config-global, "color", "background", "light") };
  83. padding: 0 (2 * $baseline-unit) $baseline-unit;
  84. border: 1px solid #{map-deep-get( $config-global,"color","border","default")};
  85. border-radius: #{map-deep-get($config-global, "border-radius", "xs" )};
  86. text-align: left;
  87. }
  88. .main-menu-container {
  89. a {
  90. padding: $baseline-unit 0;
  91. line-height: 1;
  92. }
  93. }
  94. .woocommerce-menu-container {
  95. text-align: left;
  96. position: absolute;
  97. right: 2 * $baseline-unit;
  98. left: 2 * $baseline-unit;
  99. width: calc(100% - 32px);
  100. margin-top: 6 * $baseline-unit;
  101. border-radius: #{map-deep-get($config-global, "border-radius", "xs" )};
  102. }
  103. }
  104. }
  105. }