2021-06-10 19:04:46 +02:00

120 lines
2.7 KiB
SCSS

.start#form{
.entete{
border-top: 1px solid $light-blue;
}
h2{
margin-top: 0;
}
.body-wrapper{
width: 100%;
min-width: 250px;
margin: auto auto 140px auto;
form{
width: calc( (100% / 2));
margin-top: 20px;
margin: auto;
& > .form-columns{
width: 100%;
margin: 20px 0;
& > .form-column.w-100{
& > .form-group{
width: 100%;
& > .form-data{
width: 100%;
& > .form-textarea-wrapper {
width: 100%;
textarea{
width: 100%;
resize: none;
border: none;
}
}
}
}
}
& > .form-column {
padding: 20px 0;
display: flex;
width: 100%;
&:not(:nth-last-child(1)){
border-bottom: 1px solid $red;
}
& > .form-group{
width: auto;
.form-data{
@include inlineflex();
margin: 0px 0px;
&> div{
overflow: hidden;
margin: 10px 10px;
min-width: 100px;
border: 2px solid $red;
border-radius: 30px;
padding: 10px 20px;
&.check{
background: $red;
color: white;
}
input{
border: none;
}
input[type='radio'] {
visibility: hidden;
position: absolute;
}
label{
cursor: pointer;
}
}
}
}
}
}
.button-wrapper{
background: $red;
height: 100px;
position: absolute;
left: 0;
width: 100%;
button{
margin-right: 25%;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: white;
border-radius: 30px;
padding: 10px 35px;
box-shadow:none;
border:0;
}
}
}
#send-valide{
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: $red;
border-radius: 20px;
position: fixed;
width: 30%;
min-height: 30%;
left: 50%;
top: 50%;
padding: 50px;
.toast{
position: relative;
text-align: center;
color: white;
}
.ok{
color: white;
position: absolute;
right: 20px;
bottom: 20px;
}
}
}
}