lostplaces-frontend/components/03_Organisms/form/_form.scss

68 lines
1.4 KiB
SCSS

.LP-Form{
.LP-Form__Fieldset{
border: none;
.LP-Form__Legend{
margin: 0;
padding: 0;
font-family: $-primary-sans-serif-font;
font-size: 21px;
}
.LP-Form__Composition{
display: flex;
flex-direction: row;
justify-content: space-between;
.LP-Form__Field{
flex: 3 1 100px;
padding: 6px 15px;
&--wider{
flex: 5 1;
}
&--wide{
flex: 4 1;
}
&--narrow{
flex: 2 0;
}
&--narrower{
flex: 1 0;
}
}
}
}
}
@media(max-width: $-viewport-small){
.LP-Form{
.LP-Form__Fieldset{
.LP-Form__Composition--breakable{
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
}
}
@media(max-width: $-viewport-extra-small){
.LP-Form{
.LP-Form__Fieldset{
.LP-Form__Composition{
display: flex;
flex-direction: column;
justify-content: space-between;
.LP-Form__Field{
flex: 3 1 100px;
padding: 12px 15px;
}
}
}
}
}