form input required * ok

This commit is contained in:
2022-01-07 15:45:08 +01:00
parent 0e36569b93
commit 214b229992
2 changed files with 408 additions and 51 deletions
+202 -23
View File
@@ -21,7 +21,7 @@
flex-direction: row;
flex-wrap: wrap;
flex-basis: auto;
justify-content: space-between;
justify-content: flex-start;
margin-top: 10vh;
// input:focus ~ label,
// input:not(:placeholder-shown) ~ label {
@@ -44,15 +44,21 @@
}
.form-item-titre-du-document{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 2rem;
width: 100%;
&:after{
content: "*";
color: red;
font-size: 2rem;
padding-left: 0.5rem;
}
label{width: 100%;}
input{
// overflow: visible;
width: 100%;
width: 90%;
height: 5rem;
// ::placeholder{
@@ -71,67 +77,161 @@
}
.form-item-auteur-s-{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 2rem;
width: 100%;
&:after{
content: "*";
color: red;
font-size: 2rem;
padding-left: 0.5rem;
}
label{width: 100%;}
input{
width: 100%;
width: 90%;
}
}
.form-item-date-de-parution{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 2rem;
width: 45%;
&:after{
content: "*";
color: red;
font-size: 2rem;
padding-left: 0.5rem;
}
label{width: 100%;}
input{
width: 100%;
width: 90%;
}
}
.form-item-nombre-de-pages{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 2rem;
width: 45%;
margin-right: 3rem;
label{width: 100%;}
input{
// margin-top: 1rem;
width: 100%;
}
}
.form-item-nom-de-la-revue-et-de-l-editeur{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin-top: 2rem;
&:after{
content: "*";
color: red;
font-size: 2rem;
padding-left: 0.5rem;
}
label{width: 100%;}
input{
width: 100%;
width: 90%;
}
}
.form-item-type-de-document-revue-article-etc-{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 2rem;
width: 100%;
&:after{
content: "*";
color: red;
font-size: 2rem;
padding-left: 0.5rem;
}
label{width: 100%;}
input{
width: 100%;
width: 90%;
}
}
.form-item-resume-de-la-ressource{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin-top: 2rem;
textarea{width: 100%;}
&:after{
content: "*";
color: red;
font-size: 2rem;
padding-left: 1rem;
}
label{width:100%}
div{
width: 90%;
textarea{width: 100%;}
}
}
.form-item-_-ou-4-mots-ou-expression-cles-pour-identifier-le-sujet{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 2rem;
width: 100%;
label{width: 100%;}
input{
width: 100%;
width: 90%;
height: 3rem;
}
}
.form-item-url-vers-une-video-ou-un-site-internet{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 2rem;
width: 100%;
label{width: 100%;}
input{
width: 100%;
width: 90%;
height: 3rem;
}
}
.form-item-courriel{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 2rem;
width: 45%;
input{width: 100%;}
width: 47%;
&:after{
content: "*";
color: red;
font-size: 2rem;
padding-left: 0.5rem;
}
label{width: 100%;}
input{width: 90%;}
}
.form-item-telephone{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 2rem;
width: 45%;
input{width: 100%;}
width: 47%;
margin-right: 3rem;
&:after{
content: "*";
color: red;
font-size: 2rem;
padding-left: 0.5rem;
}
label{width: 100%;}
input{width: 90%;}
}
#edit-actions{
// display: inline-flex;
@@ -159,7 +259,7 @@
flex-direction: row;
flex-wrap: wrap;
flex-basis: auto;
justify-content: space-between;
justify-content: flex-start;
margin-top: 10vh;
// input:focus ~ label,
// input:not(:placeholder-shown) ~ label {
@@ -171,56 +271,135 @@
}
.form-item-intitule-de-l-offre-de-service{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 2rem;
width: 100%;
&:after{
content: "*";
color: red;
font-size: 2rem;
padding-left: 0.5rem;
}
label{width: 100%;}
input{
width: 100%;
width: 90%;
height: 5rem;
}
}
.form-item-structure{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 2rem;
width: 100%;
&:after{
content: "*";
color: red;
font-size: 2rem;
padding-left: 0.5rem;
}
label{width: 100%;}
input{
width: 100%;
width: 90%;
}
}
.form-item-localisation{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 2rem;
width: 100%;
&:after{
content: "*";
color: red;
font-size: 2rem;
padding-left: 0.5rem;
}
label{width: 100%; }
input{
width: 100%;
width: 90%;
}
}
div{
width: 100%;
.form-item-description{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 2rem;
width: 100%;
label{width: 100%;}
textarea{
width: 90%;
}
}
}
.form-item-description{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 2rem;
width: 100%;
label{width: 100%;}
textarea{
width: 100%;
width: 90%;
}
}
#edit-lien--wrapper{
width: 100%;
.form-item-lien-url{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 2rem;
width: 100%;
&:after{
content: "*";
color: red;
font-size: 2rem;
padding-left: 0.5rem;
}
label{width: 100%;}
input{
width: 100%;
width: 90%;
}
}
}
.form-item-courriel{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 2rem;
width: 45%;
input{width: 100%;}
width: 47%;
&:after{
content: "*";
color: red;
font-size: 2rem;
padding-left: 0.5rem;
}
label{width: 100%;}
input{width: 90%;}
}
.form-item-telephone{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 2rem;
width: 45%;
input{width: 100%;}
width: 47%;
margin-right: 3rem;
&:after{
content: "*";
color: red;
font-size: 2rem;
padding-left: 0.5rem;
}
label{width: 100%;}
input{width: 90%;}
}
#edit-actions{
// display: inline-flex;