css form user registrer

This commit is contained in:
2023-11-23 14:46:08 +01:00
parent fd3f2e013f
commit 0eb7f122f1
16 changed files with 520 additions and 110 deletions
@@ -1,3 +1,4 @@
.mailto{
text-decoration: underline;
}
}
@@ -32,6 +32,8 @@ $header-height : 150px;
.layout-content{
padding-top: 7rem;
padding-bottom: 6rem;
width: 60%;
margin: auto;
}
main{
@@ -15,3 +15,14 @@
cursor: pointer;
}
.form-submit{
background-color: white;
border: solid black 1px;
text-transform: uppercase;
padding: 1rem;
height: 5rem !important;
margin-bottom: 1rem;
font-size: 1.3rem;
font-weight: 300;
}
@@ -0,0 +1,31 @@
.user--register{
h1{
font-size: 3rem !important;
font-weight: normal;
}
.form-item{
display: flex;
flex-direction: column;
}
#user-register-form{
.form-item{
display: flex;
flex-direction: column;
padding-bottom: 1rem;
}
label{
padding-bottom: 0.5rem;
}
input{
height: 2rem;
}
}
}
+22 -18
View File
@@ -1,24 +1,28 @@
.layout--onecol{
width: 70%;
margin: auto;
font-size: 1.5rem;
font-weight: 400;
font-style: normal;
.block-region-content{
.block-block-content1ca95211-9fa2-4ef2-a460-8184d1eaf20f{
display: flex;
justify-content: flex-end;
:hover{
background-color: $yellow-puca;
.home-page-layout-content{
.layout--onecol{
// width: 70%;
margin: auto;
font-size: 1.5rem;
font-weight: 400;
font-style: normal;
.block-region-content{
.block-block-content1ca95211-9fa2-4ef2-a460-8184d1eaf20f{
display: flex;
justify-content: flex-end;
:hover{
background-color: $yellow-puca;
}
}
}
.block-block-content1dd151e8-8a8b-4586-9e62-8905ba0c93e0{
display: flex;
justify-content: flex-end;
:hover{
background-color: $yellow-puca;
.block-block-content1dd151e8-8a8b-4586-9e62-8905ba0c93e0{
display: flex;
justify-content: flex-end;
:hover{
background-color: $yellow-puca;
}
}
}
}
}
@@ -0,0 +1,4 @@
.form-item{
display: flex;
flex-direction: column;
}
@@ -24,8 +24,6 @@ header{
width: fit-content;
padding-left: 4rem;
height: $header-height;
}
#block-reha-logoreha{
grid-column: 2;
@@ -38,13 +36,9 @@ header{
img{
height: 150px;
width: fit-content;
}
}
}
}
#block-reha-connexionutilisateur{
@@ -59,29 +53,47 @@ header{
}
display: flex;
flex-direction: column;
height: $header-height;
.user-login-form{
display: none;
height: fit-content;
.connexion{
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 */
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%;
position: relative;
.connexion-full{
display: none;
background-color: $white;
width: 400px;
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%;
position: relative;
right:-150px;
}
}
}
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%;
}
// .user-login-form{
// 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%;
// }
// 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{
grid-column: 10;
@@ -94,7 +106,7 @@ header{
}
display: flex;
flex-direction: column;
height: $header-height;
height: fit-content;
.config_pages--contact--full {
float: right;
@@ -114,7 +126,7 @@ header{
clip-path: inset(0px -10px -10px -10px);
.field__item{
padding: 5% 10% 5% 5%;
}
}
}
}
}
+5 -3
View File
@@ -3,8 +3,8 @@
/*global*/
@import "global/variables/colors";
@import "global/variables/typography.scss";
@import "global/variables/buttons.scss";
@import "global/variables/typography";
@import "global/variables/buttons";
@import "global/core";
@import "global/fonts";
@import "global/layout";
@@ -15,6 +15,8 @@
/*partials*/
@import "partials/header";
@import "partials/footer";
@import "partials/forms";
/*pages*/
@import "pages/home";
@import "pages/home";
@import "pages/creer-un-compte";