css header & footer
This commit is contained in:
@@ -1,47 +1,48 @@
|
||||
footer{
|
||||
// box-shadow: 1px 0px 8px $black;
|
||||
// display: flex;
|
||||
|
||||
// flex-direction: row;
|
||||
background-color: $white;
|
||||
padding-top: 3rem;
|
||||
font-family: "Marianne";
|
||||
font-weight: 800;
|
||||
|
||||
font-size: 1.3rem;
|
||||
text-transform: lowercase;
|
||||
h2{font-size: 1.3rem;}
|
||||
div{
|
||||
display: flex;
|
||||
flex: 1 1 120px;
|
||||
flex-direction: row;
|
||||
h2{
|
||||
font-family: 'Marianne';
|
||||
}
|
||||
// display: flex;
|
||||
// flex: 1 1 120px;
|
||||
// flex-direction: row;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr) ;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#block-reha-logoreha-2{
|
||||
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#block-reha-pieddepage {
|
||||
// background-color: yellowgreen;
|
||||
// font-family: 'Marianne';
|
||||
font-size: 1.5rem;
|
||||
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
ul{padding-left: 0;}
|
||||
}
|
||||
|
||||
#block-reha-operateurduprogramme{
|
||||
grid-column: 4 /span 5;
|
||||
grid-row: 1 /span 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-left: $yellow-puca solid 5px;
|
||||
border-right: $yellow-puca solid 5px;
|
||||
padding-left: 3rem;
|
||||
// font-family: 'Marianne';
|
||||
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
#block-reha-config-pages-2{
|
||||
margin-left: 3rem;
|
||||
border: none;
|
||||
width: 20%;
|
||||
grid-column: 6 /span 10;
|
||||
grid-row: 1 /span 3;
|
||||
|
||||
// margin-left: 3rem;
|
||||
border-left: $yellow-puca solid 5px;
|
||||
padding-left: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
@@ -15,59 +15,94 @@ header{
|
||||
// position: fixed;
|
||||
// }
|
||||
div{
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
display: inline-grid;
|
||||
align-items: center;
|
||||
grid-template-columns: repeat(10, 1fr) ;
|
||||
|
||||
#block-reha-logoministere{
|
||||
|
||||
grid-column: 1;
|
||||
width: fit-content;
|
||||
padding-left: 4rem;
|
||||
height: $header-height;
|
||||
|
||||
|
||||
}
|
||||
#block-reha-logoreha{
|
||||
grid-column: 2;
|
||||
max-height: 90%;
|
||||
img{
|
||||
// max-height: ;
|
||||
height: $header-height;
|
||||
.field--name-field-logo{
|
||||
height: $header-height;
|
||||
.field__item{
|
||||
height: $header-height;
|
||||
img{
|
||||
height: 150px;
|
||||
width: fit-content;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
#block-reha-connexionutilisateur{
|
||||
grid-column: 9;
|
||||
.bouton-connexion{
|
||||
padding-right: 3rem;
|
||||
|
||||
:before{
|
||||
content: url(../images/noun-contact-2495375.svg);
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 15%;
|
||||
height: $header-height;
|
||||
|
||||
.user-login-form{
|
||||
display: none;
|
||||
// transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
|
||||
background-color: $white;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
|
||||
clip-path: inset(0px -10px -10px -10px);
|
||||
padding: 5% 10% 5% 5%;
|
||||
|
||||
}
|
||||
ul{
|
||||
display: none;
|
||||
// transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
|
||||
background-color: $white;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
|
||||
clip-path: inset(0px -10px -10px -10px);
|
||||
padding: 5% 10% 5% 5%;
|
||||
}
|
||||
|
||||
}
|
||||
#block-reha-config-pages{
|
||||
width:35%;
|
||||
grid-column: 10;
|
||||
.bouton-contact{
|
||||
padding-right: 4rem;
|
||||
::before{
|
||||
content: url(../images/noun-letter-1064628.svg);
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: $header-height;
|
||||
|
||||
.bouton{
|
||||
align-self: flex-end;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.config_pages--contact--full {
|
||||
float: right;
|
||||
display: none; /* Cacher initialement le contenu */
|
||||
height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
|
||||
// transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
// .open{
|
||||
// display: block;
|
||||
// width: 300px;
|
||||
// background-color: $white;
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
.field--type-text-long {
|
||||
transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
|
||||
@@ -80,29 +115,18 @@ header{
|
||||
.field__item{
|
||||
padding: 5% 10% 5% 5%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
// #block-reha-config-pages {
|
||||
// position: relative;
|
||||
// }
|
||||
|
||||
// .config_pages--contact--full {
|
||||
// overflow: hidden;
|
||||
// height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
|
||||
// transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
|
||||
// }
|
||||
|
||||
// .field--type-text-long {
|
||||
// padding: 20px;
|
||||
// background-color: #f0f0f0;
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
|
||||
.bouton{
|
||||
align-self: flex-end;
|
||||
width: fit-content;
|
||||
h2{
|
||||
text-transform: lowercase;
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user