_header.scss 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. header{
  2. display: block;
  3. height: $header-height;
  4. background-color: white;
  5. // position: fixed;
  6. z-index: 99;
  7. width: 100vw;
  8. position: -webkit-sticky;
  9. position: sticky;
  10. top: 0;
  11. box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  12. // .sticky{
  13. // position: fixed;
  14. // }
  15. div{
  16. display: inline-grid;
  17. align-items: center;
  18. grid-template-columns: repeat(10, 1fr) ;
  19. #block-reha-logoministere{
  20. grid-column: 1;
  21. width: fit-content;
  22. padding-left: 4rem;
  23. height: $header-height;
  24. }
  25. #block-reha-logoreha{
  26. grid-column: 2;
  27. max-height: 90%;
  28. height: $header-height;
  29. .field--name-field-logo{
  30. height: $header-height;
  31. .field__item{
  32. height: $header-height;
  33. img{
  34. height: 150px;
  35. width: fit-content;
  36. }
  37. }
  38. }
  39. }
  40. #block-reha-connexionutilisateur{
  41. grid-column: 9;
  42. .bouton-connexion{
  43. padding-right: 3rem;
  44. :before{
  45. content: url(../images/noun-contact-2495375.svg);
  46. padding-right: 1rem;
  47. }
  48. }
  49. display: flex;
  50. flex-direction: column;
  51. height: fit-content;
  52. .connexion{
  53. // float: right;
  54. height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
  55. width: 100%;
  56. position: relative;
  57. .connexion-full{
  58. display: none;
  59. right:-235px;
  60. top: 36px; // Positionnez-les sous les boutons
  61. // right: 0; // Ou ajustez selon vos besoins
  62. position: absolute;
  63. background-color: $white;
  64. // width: 400px;
  65. width: 30vw;
  66. height: 100vh;
  67. box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  68. clip-path: inset(0px -10px -10px -10px);
  69. padding: 5% 10% 5% 5%;
  70. }
  71. }
  72. }
  73. #block-reha-config-pages{
  74. grid-column: 10;
  75. .bouton-contact{
  76. padding-right: 4rem;
  77. ::before{
  78. content: url(../images/noun-letter-1064628.svg);
  79. padding-right: 1rem;
  80. }
  81. }
  82. display: flex;
  83. flex-direction: column;
  84. height: fit-content;
  85. .config_pages--contact--full {
  86. // float: right;
  87. height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
  88. width: 100%;
  89. .field--type-text-long {
  90. display: none;
  91. background-color: $white;
  92. position: absolute;
  93. right:0px;
  94. top: 100%;
  95. // width: 500px;
  96. width: 30vw;
  97. height: 100vh;
  98. box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  99. clip-path: inset(0px -10px -10px -10px);
  100. .field__item{
  101. display: flex;
  102. flex-direction: column;
  103. padding: 5% 10% 5% 5%;
  104. }
  105. }
  106. }
  107. }
  108. }
  109. .bouton{
  110. align-self: flex-end;
  111. width: fit-content;
  112. h2{
  113. text-transform: lowercase;
  114. display: inline-flex;
  115. }
  116. }
  117. }
  118. // .config_pages--contact--full, .connexion-full {
  119. // position: absolute;
  120. // top: 100%; // Positionnez-les sous les boutons
  121. // right: 0; // Ou ajustez selon vos besoins
  122. // display: none; // Assurez-vous qu'ils ne sont pas visibles par défaut
  123. // // ... (autres styles)
  124. // }
  125. // #block-reha-connexionutilisateur:hover .connexion-full,
  126. // #block-reha-config-pages:hover .config_pages--contact--full {
  127. // display: block; // Affichez-les lorsqu'ils sont survolés
  128. // }