_mobile.scss 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. .mobile-container {
  2. position: absolute;
  3. //width: 100%;
  4. //height: 100%;
  5. top: 40%;
  6. left: 0;
  7. margin: 0 auto;
  8. z-index: 2;
  9. }
  10. .mobile-logo {
  11. svg, img {
  12. height: 42px;
  13. margin-top: .7rem;
  14. margin-left: 1.4rem;
  15. path {
  16. fill: $light-color;
  17. }
  18. }
  19. }
  20. // Hamburger Menu
  21. .mobile-menu {
  22. display: none;
  23. top: 0;
  24. right: 0;
  25. z-index: 3;
  26. .header-fixed & {
  27. position: fixed;
  28. }
  29. @include breakpoint(md) {
  30. display: block;
  31. }
  32. .button_container {
  33. position: absolute;
  34. top: 1.3rem;
  35. right: $horiz-padding;
  36. height: $mobile-button-height;
  37. width: $mobile-button-width;
  38. cursor: pointer;
  39. z-index: 100;
  40. transition: opacity .25s ease, top 0.5s ease;
  41. $bar-offset: $mobile-button-height / 3;
  42. &:hover {
  43. opacity: .7;
  44. }
  45. &.active {
  46. position: fixed;
  47. .top {
  48. transform: translateY($bar-offset) translateX(0) rotate(45deg);
  49. background: $mobile-color-active;
  50. }
  51. .middle {
  52. opacity: 0;
  53. background: $mobile-color-active;
  54. }
  55. .bottom {
  56. transform: translateY(-($bar-offset)) translateX(0) rotate(-45deg);
  57. background: $mobile-color-active;
  58. }
  59. }
  60. span {
  61. background: $mobile-color-main;
  62. border: none;
  63. height: 4px;
  64. width: 100%;
  65. position: absolute;
  66. top: 0;
  67. left: 0;
  68. transition: all .35s ease;
  69. cursor: pointer;
  70. &:nth-of-type(2) {
  71. top: $bar-offset;
  72. }
  73. &:nth-of-type(3) {
  74. top: $bar-offset * 2;
  75. }
  76. }
  77. }
  78. }
  79. .overlay {
  80. position: fixed;
  81. background: #000;
  82. top: 0;
  83. left: 0;
  84. width: 100%;
  85. height: 0%;
  86. opacity: 0;
  87. visibility: hidden;
  88. transition: opacity .35s, visibility .35s, height .35s;
  89. &.open {
  90. opacity: .95;
  91. visibility: visible;
  92. height: 100%;
  93. }
  94. nav {
  95. position: relative;
  96. margin: 0 auto;
  97. text-align: center;
  98. }
  99. }
  100. .overlay-menu {
  101. height: calc(100% - 90px);
  102. overflow-y: scroll;
  103. & > .tree {
  104. text-align: left;
  105. }
  106. }
  107. .treemenu {
  108. &.treemenu-root {
  109. margin: 1rem;
  110. }
  111. li {
  112. list-style: none;
  113. margin: 0 0 1px;
  114. padding: 5px 0;
  115. line-height: 1.2rem;
  116. background: rgba($gray-color-dark,0.1);
  117. a {
  118. display: block;
  119. margin-left: 1.2rem;
  120. font-size: 1rem;
  121. &:hover, &:focus, &.active {
  122. color: $primary-color-light !important;
  123. text-decoration: none;
  124. }
  125. }
  126. }
  127. ul {
  128. margin: 0 0 0 1rem;
  129. }
  130. .toggler {
  131. cursor: pointer;
  132. vertical-align: top;
  133. font-size: 1.1rem;
  134. line-height: 1rem;
  135. padding-left: 5px;
  136. float: left;
  137. &:before {
  138. display: inline-block; margin-right: 2pt;
  139. }
  140. }
  141. li.tree-empty > .toggler {
  142. opacity: 0.3; cursor: default;
  143. &:before {
  144. content: "\2022";
  145. }
  146. }
  147. li.tree-closed > .toggler:before {
  148. content: "+";
  149. }
  150. li.tree-opened > .toggler:before {
  151. content: "\2212";
  152. }
  153. }
  154. .mobile-nav-open {
  155. overflow-y: hidden;
  156. }