_header.scss 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. .layout-container{
  2. position: relative;
  3. width: 100vw;
  4. header{
  5. position: fixed;
  6. z-index: 99;
  7. width: 100vw;
  8. }
  9. }
  10. #header-top {
  11. height: 7rem;
  12. background-color: $white;
  13. box-shadow: 1px 0px 8px $black;
  14. display: flex;
  15. flex-direction: row;
  16. // justify-content: space-between;
  17. color: $black;
  18. top:0%;
  19. scroll-margin: 8rem {};
  20. // logo
  21. .region-header-top-left {
  22. // width: 80vw;
  23. display:flex;
  24. flex-direction: row;
  25. // padding: 1rem;
  26. padding-left: 4%;
  27. align-items:center;
  28. color: $black;
  29. // font-weight: 800;
  30. flex: 1;
  31. #block-logogouv{
  32. display: flex;
  33. height: 100%;
  34. align-items: center;
  35. @media (max-width: 810px){
  36. width: 30%;
  37. }
  38. img{
  39. width: 100%;
  40. height: auto;
  41. }
  42. }
  43. #block-eql-logoepau{
  44. height: 100%;
  45. align-content: center;
  46. padding-left: 1rem;
  47. }
  48. #block-logoeql{
  49. display: flex;
  50. height: 100%;
  51. align-items: center;
  52. img{
  53. // min-width: 80px;
  54. width: 100%;
  55. height: auto;
  56. }
  57. @media (max-width: 810px){
  58. img{
  59. width: 80%;
  60. }
  61. }
  62. }
  63. }
  64. .region-header-top-rigth{
  65. display: flex;
  66. flex-direction: row;
  67. width: 40%;
  68. align-items: center;
  69. justify-content: flex-end;
  70. #block-eql-identitedusite{
  71. text-transform: uppercase;
  72. font-family: "Source Code Pro";
  73. color: $blue-dark !important;
  74. font-size: 1rem;
  75. text-align: end;
  76. width: 30%;
  77. :visited {
  78. color: $blue-dark !important;
  79. }
  80. :link{
  81. color: $blue-dark !important;
  82. }
  83. @media (max-width: 870px){
  84. display: none;
  85. }
  86. }
  87. #block-logoeql{
  88. padding-left: 1rem;
  89. padding-right: 2.5rem;
  90. img{
  91. width: 80px;
  92. height: auto;
  93. }
  94. @media (max-width: 870px){
  95. padding-right: 1rem;
  96. // img{
  97. // width: 50px;
  98. // }
  99. }
  100. }
  101. // menu burger à droite
  102. #block-burger {
  103. z-index: 1;
  104. background-color: $blue-light;
  105. font-size: 0.7rem;
  106. color: black;
  107. display: block;
  108. width: 7rem;
  109. height: 100%;
  110. margin-top: 0;
  111. aspect-ratio: 1;
  112. :hover{
  113. cursor: pointer;
  114. }
  115. h2{
  116. padding-top: 1rem;
  117. font-size: 1em;
  118. font-weight: light;
  119. color: $blue-light;
  120. }
  121. h2:after{
  122. display: block;
  123. margin:auto;
  124. height: 70px;
  125. content:url('data:image/svg+xml,<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 5,13 H 65" stroke-linecap="round" stroke="black" stroke-width="2.5"/><path id="path930-3" d="M 5,25 H 65" stroke-linecap="round" stroke="black" stroke-width="2.5"/><path id="path930-6" d="M 5,37 H 65" stroke-linecap="round" stroke="black" stroke-width="2.5"/></svg>');
  126. }
  127. #block-burger-menu{
  128. display: block;
  129. margin: 0;
  130. align-self: center;
  131. text-align: center;
  132. // height:7rem;
  133. }
  134. // block menu open fond bleu
  135. .ul1:not(.sous-liste){
  136. width: 300%;
  137. position: relative;
  138. right: 260px;
  139. margin: 0;
  140. padding-top: 2rem;
  141. padding-bottom: 2rem;
  142. z-index: 99;
  143. }
  144. ul {
  145. display: none;
  146. background-color: $blue-light;
  147. line-height: 2rem;
  148. list-style: none;
  149. .ul1 .sous-liste{
  150. a{
  151. opacity: 1;
  152. }
  153. }
  154. a{
  155. opacity: 1;
  156. color: $white;
  157. font-weight: 800;
  158. font-size: 1rem;
  159. }
  160. }
  161. &.opened ul {
  162. display: block;
  163. }
  164. }
  165. }
  166. // reseaux sociaux
  167. #block-socialnetwork-2{
  168. display: none;
  169. position: relative;
  170. top: -33px;
  171. align-self: flex-end;
  172. margin-left: auto;
  173. .field--name-body{
  174. min-height: 75px;
  175. // margin-right: 1rem;
  176. }
  177. p{
  178. display: flex;
  179. flex-direction: row-reverse;
  180. margin-bottom: 0;
  181. min-height: 65px;
  182. justify-content: space-around;
  183. width: 140px;
  184. a{
  185. color: $white;
  186. font-size: 0;
  187. }
  188. svg.ext{
  189. display: none;
  190. }
  191. .link-twitter{
  192. display: flex;
  193. background-color: black;
  194. width: 40px;
  195. justify-content: center;
  196. align-items: flex-end;
  197. &:before{
  198. content: url("../images/pictos/logo_x_blanc.svg");
  199. min-width: 30px;
  200. padding-bottom: 0.5rem;
  201. }
  202. }
  203. .link-youtube{
  204. display: flex;
  205. background-color: black;
  206. min-width: 40px;
  207. justify-content: center;
  208. align-items: flex-end;
  209. &:before{
  210. content: url("../images/pictos/youtube_white.svg");
  211. min-width: 25px;
  212. padding-bottom: 0.5rem;
  213. }
  214. }
  215. .link-linkedin{
  216. display: flex;
  217. background-color: black;
  218. min-width: 40px;
  219. justify-content: center;
  220. align-items: flex-end;
  221. // background-position-y: top;
  222. &:before{
  223. content: url("../images/pictos/linkedin_white.svg");
  224. min-width: 35px;
  225. padding-bottom: 0.2rem;
  226. }
  227. }
  228. }
  229. }
  230. }
  231. .region-header-bottom{
  232. box-shadow: 0 4px 4px 3px rgba(0, 0, 0, 0.1);
  233. #block-headermenu{
  234. align-self: baseline;
  235. width: 100%;
  236. // margin-left: 3rem;
  237. // margin-right: 3rem;
  238. background-color: white;
  239. border-top: solid $blue-light 1px;
  240. }
  241. ul{
  242. font-size: 1rem;
  243. font-weight: 900;
  244. list-style: none;
  245. display: flex;
  246. flex-direction: row;
  247. // justify-content: space-between;
  248. justify-content: space-evenly;
  249. width: 100%;
  250. padding-inline-start: 0px;
  251. padding: 1rem;
  252. margin-top: 0 !important;
  253. padding-bottom: 0.5rem;
  254. .is-active{
  255. color:$blue-light;
  256. }
  257. ul{
  258. position: absolute;
  259. left: -28%;
  260. z-index: 1000;
  261. // display: none;
  262. display: flex;
  263. flex-direction: column;
  264. min-width: 210px;
  265. width: fit-content;
  266. justify-content: space-between;
  267. padding-inline-start: 0px;
  268. .is-active{
  269. color:$blue-light;
  270. }
  271. opacity: 0;
  272. visibility: hidden;
  273. transform: translateY(-10px);
  274. transition: opacity 0.3s ease, transform 0.3s ease;
  275. }
  276. li{
  277. position: relative;
  278. display: flex;
  279. flex-direction: column;
  280. background-color: $white;
  281. padding-bottom: 0.8rem;
  282. max-width: inherit;
  283. padding-left: 1rem;
  284. padding-right: 0.5rem;
  285. height: fit-content;
  286. a {
  287. color: $black;
  288. }
  289. .is-active{
  290. color:$blue-light;
  291. }
  292. :hover{
  293. color: $blue-light;
  294. }
  295. }
  296. li:hover ul {
  297. opacity: 1;
  298. visibility: visible;
  299. transform: translateY(0);
  300. }
  301. .ul1.sous-liste.ul2{
  302. padding-left: 1rem;
  303. }
  304. }
  305. }