css header & footer
This commit is contained in:
@@ -150,31 +150,63 @@ header {
|
||||
top: 0;
|
||||
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
|
||||
header div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between; }
|
||||
display: inline-grid;
|
||||
align-items: center;
|
||||
grid-template-columns: repeat(10, 1fr); }
|
||||
header div #block-reha-logoministere {
|
||||
width: fit-content; }
|
||||
grid-column: 1;
|
||||
width: fit-content;
|
||||
padding-left: 4rem;
|
||||
height: 150px; }
|
||||
header div #block-reha-logoreha {
|
||||
max-height: 90%; }
|
||||
grid-column: 2;
|
||||
max-height: 90%;
|
||||
height: 150px; }
|
||||
header div #block-reha-logoreha .field--name-field-logo {
|
||||
height: 150px; }
|
||||
header div #block-reha-logoreha .field--name-field-logo .field__item {
|
||||
height: 150px; }
|
||||
header div #block-reha-logoreha .field--name-field-logo .field__item img {
|
||||
height: 150px;
|
||||
width: fit-content; }
|
||||
header div #block-reha-connexionutilisateur {
|
||||
grid-column: 9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 15%;
|
||||
height: 150px; }
|
||||
header div #block-reha-connexionutilisateur .bouton-connexion {
|
||||
padding-right: 3rem; }
|
||||
header div #block-reha-connexionutilisateur .bouton-connexion :before {
|
||||
content: url(../images/noun-contact-2495375.svg);
|
||||
padding-right: 1rem; }
|
||||
header div #block-reha-connexionutilisateur .user-login-form {
|
||||
display: none; }
|
||||
display: none;
|
||||
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%; }
|
||||
header div #block-reha-connexionutilisateur ul {
|
||||
display: none; }
|
||||
display: none;
|
||||
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%; }
|
||||
header div #block-reha-config-pages {
|
||||
width: 35%;
|
||||
grid-column: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 150px; }
|
||||
header div #block-reha-config-pages .bouton {
|
||||
align-self: flex-end;
|
||||
width: 50%; }
|
||||
header div #block-reha-config-pages .bouton-contact {
|
||||
padding-right: 4rem; }
|
||||
header div #block-reha-config-pages .bouton-contact ::before {
|
||||
content: url(../images/noun-letter-1064628.svg);
|
||||
padding-right: 1rem; }
|
||||
header div #block-reha-config-pages .config_pages--contact--full {
|
||||
float: right;
|
||||
display: none;
|
||||
/* Cacher initialement le contenu */
|
||||
height: 0;
|
||||
@@ -191,32 +223,49 @@ header {
|
||||
clip-path: inset(0px -10px -10px -10px); }
|
||||
header div #block-reha-config-pages .field--type-text-long .field__item {
|
||||
padding: 5% 10% 5% 5%; }
|
||||
header .bouton {
|
||||
align-self: flex-end;
|
||||
width: fit-content; }
|
||||
header .bouton h2 {
|
||||
text-transform: lowercase;
|
||||
display: inline-flex; }
|
||||
|
||||
footer {
|
||||
background-color: white;
|
||||
padding-top: 3rem;
|
||||
font-family: "Marianne";
|
||||
font-weight: 800; }
|
||||
font-weight: 800;
|
||||
font-size: 1.3rem;
|
||||
text-transform: lowercase; }
|
||||
footer h2 {
|
||||
font-size: 1.3rem; }
|
||||
footer div {
|
||||
display: flex;
|
||||
flex: 1 1 120px;
|
||||
flex-direction: row; }
|
||||
footer div h2 {
|
||||
font-family: 'Marianne'; }
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr); }
|
||||
|
||||
#block-reha-logoreha-2 {
|
||||
grid-column: 2;
|
||||
grid-row: 1; }
|
||||
|
||||
#block-reha-pieddepage {
|
||||
font-size: 1.5rem; }
|
||||
grid-column: 2;
|
||||
grid-row: 3; }
|
||||
#block-reha-pieddepage ul {
|
||||
padding-left: 0; }
|
||||
|
||||
#block-reha-operateurduprogramme {
|
||||
grid-column: 4 /span 5;
|
||||
grid-row: 1 /span 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-left: #fdc300 solid 5px;
|
||||
border-right: #fdc300 solid 5px;
|
||||
padding-left: 3rem; }
|
||||
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;
|
||||
border-left: #fdc300 solid 5px;
|
||||
padding-left: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column; }
|
||||
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
version="1.1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 26.046085 26.038707"
|
||||
enable-background="new 0 0 64 64"
|
||||
xml:space="preserve"
|
||||
id="svg3"
|
||||
sodipodi:docname="noun-contact-2495375.svg"
|
||||
width="35"
|
||||
height="34.9"
|
||||
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||
id="defs3" /><sodipodi:namedview
|
||||
id="namedview3"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="14.354268"
|
||||
inkscape:cx="25.811139"
|
||||
inkscape:cy="15.117455"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1016"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="276"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg3"><inkscape:page
|
||||
x="0"
|
||||
y="0"
|
||||
width="26.046085"
|
||||
height="26.038708"
|
||||
id="page3"
|
||||
margin="0 0 0"
|
||||
bleed="0" /></sodipodi:namedview><g
|
||||
id="g1"
|
||||
transform="translate(-18.965517,-18.971494)"><path
|
||||
d="m 32.003,33.004 c -3.861,0 -7.002,-3.141 -7.002,-7.002 0,-3.859 3.141,-7 7.002,-7 3.859,0 6.998,3.141 6.998,7 0,3.861 -3.139,7.002 -6.998,7.002 z m 0,-12.002 c -2.758,0 -5.002,2.243 -5.002,5 0,2.758 2.244,5.002 5.002,5.002 2.756,0 4.998,-2.244 4.998,-5.002 0,-2.757 -2.242,-5 -4.998,-5 z"
|
||||
id="path1" /></g><g
|
||||
id="g2"
|
||||
transform="translate(-18.965517,-18.971494)"><path
|
||||
d="M 44,44.998 H 20.001 c -0.552,0 -1,-0.447 -1,-1 C 19.001,39.036 23.038,35 28,35 h 8 c 4.962,0 9,4.036 9,8.998 0,0.553 -0.448,1 -1,1 z m -22.927,-2 H 42.928 C 42.441,39.611 39.52,37 36,37 h -8 c -3.52,0 -6.441,2.611 -6.927,5.998 z"
|
||||
id="path2" /></g></svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -0,0 +1,36 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
version="1.1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 87.855651 61.55043"
|
||||
xml:space="preserve"
|
||||
id="svg2"
|
||||
sodipodi:docname="noun-letter-1064628.svg"
|
||||
width="45"
|
||||
height="31.5"
|
||||
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||
id="defs2" /><sodipodi:namedview
|
||||
id="namedview2"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="2.5518698"
|
||||
inkscape:cx="117.36492"
|
||||
inkscape:cy="50.551168"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1016"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="276"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg2" /><path
|
||||
d="m 87.828003,2.0327436 c 0,0 0,-0.1 0,-0.1 0,-0.2 0,-0.3 -0.1,-0.5 0,0 0,0 0,-0.1 0,0 0,0 0,0 -0.1,-0.2 -0.2,-0.3 -0.3,-0.49999992 0,0 0,-0.1 -0.1,-0.1 -0.1,-0.1 -0.2,-0.3 -0.4,-0.4 0,0 0,0 0,0 -0.2,-0.1 -0.3,-0.2 -0.5,-0.2 0,0 -0.1,0 -0.1,0 -0.2,-0.1 -0.4,-0.1 -0.6,-0.1 H 2.1280029 c -0.2,0 -0.4,0 -0.6,0 0,0 -0.1,0 -0.1,0 -0.2,0.1 -0.3,0.1 -0.50000002,0.2 0,0 0,0 0,0 -0.1,0.1 -0.3,0.2 -0.4,0.4 0,0 -0.1,0.1 -0.1,0.1 -0.1,0.19999999 -0.2,0.29999992 -0.3,0.49999992 0,0 0,0 0,0 0,0 0,0 0,0.1 -0.1,0.2 -0.1,0.3 -0.1,0.5 0,0 0,0.1 0,0.1 0,0 0,0 0,0.1 V 59.432745 c 0,1.1 0.9,2.1 2.10000002,2.1 H 85.728003 c 1.1,0 2.1,-0.9 2.1,-2.1 z m -7.7,2.1 -36.2,31.0000014 L 7.7280029,4.1327436 Z m 3.5,53.3000014 H 4.2280029 V 6.6327436 L 42.628003,39.432745 c 0.4,0.3 0.9,0.5 1.4,0.5 0.5,0 1,-0.2 1.4,-0.5 l 38.4,-32.8000014 V 57.432745 Z"
|
||||
id="path1" /></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -48,14 +48,20 @@ jQuery(document).ready(function($){
|
||||
//////////////// ok /////////////////
|
||||
|
||||
$(document).ready(function() {
|
||||
$(".bouton").click(function(event) {
|
||||
$(".bouton-contact").click(function(event) {
|
||||
$(".config_pages--contact--full").slideToggle();
|
||||
});
|
||||
});
|
||||
|
||||
/////////////// ok /////////////////
|
||||
|
||||
$(document).ready(function() {
|
||||
$(".bouton-connexion").click(function(event) {
|
||||
$(".user-login-form").slideToggle();
|
||||
$("ul").slideToggle();
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
<div{{ attributes.addClass(classes) }}>
|
||||
{{ title_prefix }}
|
||||
{% if label %}
|
||||
<button class="bouton">
|
||||
<button class="bouton bouton-contact">
|
||||
<h2{{ title_attributes }}>{{ label }}</h2>
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
<div{{ attributes.addClass(classes) }}>
|
||||
{{ title_prefix }}
|
||||
{% if label %}
|
||||
<button class="bouton">
|
||||
<button class="bouton bouton-connexion">
|
||||
<h2{{ title_attributes }}>{{ label }}</h2>
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user