header.scss 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. header{
  2. max-height: 100px;
  3. .row{
  4. background: white;
  5. max-height: inherit;
  6. justify-content: space-between;
  7. #block-popsu-colloque-branding{
  8. max-height: inherit;
  9. & > div{
  10. max-height: inherit;
  11. a{
  12. display: block;
  13. max-height: inherit;
  14. img{
  15. width: 100%;
  16. max-height: inherit;
  17. object-fit: contain;
  18. padding-bottom: 0.5rem;
  19. padding-top: 0.5rem;
  20. @media screen and (min-width: 450px) {
  21. width: auto;
  22. }
  23. }
  24. }
  25. }
  26. &.is-active{
  27. z-index: 10000;
  28. }
  29. }
  30. #block-renderedsitesettingsblock-2{
  31. width: auto;
  32. border-left: 1px solid $color1;
  33. padding: 0;
  34. display: none;
  35. @media screen and (min-width: 1200px) {
  36. display: flex;
  37. }
  38. .site_setting_entity{
  39. display: flex;
  40. align-items: center;
  41. justify-content: center;
  42. padding: 0 1rem 0 0rem;
  43. h1{
  44. max-width: 100%;
  45. color: $color2;
  46. padding-right: 1rem;
  47. text-transform: uppercase;
  48. text-align: right;
  49. align-self: stretch;
  50. margin: auto 0;
  51. width: 100%;
  52. }
  53. .__info_colloque{
  54. width: 100%;
  55. align-self: stretch;
  56. margin: auto 0;
  57. height: 7vw;
  58. height: auto;
  59. &>div{
  60. &:first-child{
  61. white-space: nowrap;
  62. border-bottom: 2px solid $color1;
  63. }
  64. }
  65. }
  66. }
  67. }
  68. #block-mainnavigation{
  69. // max-width: max-content;
  70. width: max-content;
  71. .burger{
  72. padding-top: 0.25rem;
  73. z-index: 9999;
  74. }
  75. .nav-main{
  76. display: none;
  77. @media screen and (min-width: 1200px) {
  78. display: block;
  79. ul{
  80. margin-bottom: 0;
  81. li{
  82. margin: 0 0.5rem;
  83. }
  84. }
  85. }
  86. &.is-active{
  87. display: block;
  88. position: fixed;
  89. width: 100vw;
  90. height: 100vh;
  91. left: 0;
  92. top: 0;
  93. background: white;
  94. z-index: 9999;
  95. @media screen and (min-width: 576px) {
  96. height: auto;
  97. ul{
  98. margin: 130px 0 50px 0;
  99. }
  100. li{
  101. font-size: 1.7rem;
  102. line-height: 3rem;
  103. padding: 0 15px;
  104. }
  105. }
  106. ul{
  107. display: flex;
  108. justify-content: center;
  109. flex-direction: column;
  110. height: 100%;
  111. align-items: center;
  112. li{
  113. font-size: 1.5rem;
  114. line-height: 3rem;
  115. padding: 0 15px;
  116. @media screen and (min-width: 360px) {
  117. width: 100%;
  118. &::before{
  119. display: inline-block;
  120. content: " ";
  121. width: 0%;
  122. transition: width 1s ease;
  123. height: 1px;
  124. background: $color1;
  125. }
  126. &:hover{
  127. &::before{
  128. width: 10%;
  129. transition: all 1s ease;
  130. }
  131. }
  132. }
  133. }
  134. }
  135. }
  136. }
  137. }
  138. }
  139. }
  140. #block-mainnavigation{
  141. border-left: 1px solid $color1;
  142. display: flex;
  143. align-items: center;
  144. justify-content: flex-end;
  145. .burger{
  146. display: block;
  147. margin: auto;
  148. @media screen and (min-width: 1200px) {
  149. display: none;
  150. }
  151. &.is-active{
  152. z-index: 999;
  153. }
  154. }
  155. .nav-main{
  156. display: none;
  157. height: auto;
  158. @media screen and (min-width: 1200px) {
  159. display: flex;
  160. }
  161. }
  162. }
  163. header.front{
  164. #block-popsu-colloque-branding{
  165. width: 21rem;
  166. position: relative;
  167. z-index: 9999;
  168. a{
  169. max-height: 8rem!important;
  170. }
  171. &.is-active{
  172. overflow: inherit;
  173. &>div{
  174. max-height: 115px;
  175. }
  176. }
  177. }
  178. #block-renderedsitesettingsblock-2{
  179. display: none;
  180. }
  181. }