Form squishiness and Button layout
This commit is contained in:
parent
f9233249a3
commit
e431d9a1a0
@ -1,6 +1,13 @@
|
||||
.LP-Form{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.LP-Form__Fieldset{
|
||||
border: none;
|
||||
border: none;
|
||||
|
||||
max-width: 1200px;
|
||||
min-width: $-viewport-medium;
|
||||
|
||||
.LP-Form__Legend{
|
||||
margin: 0;
|
||||
@ -9,42 +16,72 @@
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
|
||||
.LP-Form__Composition{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
justify-content: space-between;
|
||||
|
||||
.LP-Form__Field{
|
||||
flex: 3 1 100px;
|
||||
flex: 3 2 100px;
|
||||
padding: 6px 15px;
|
||||
|
||||
&--wider{
|
||||
flex: 5 1;
|
||||
flex: 5 2;
|
||||
}
|
||||
|
||||
&--wide{
|
||||
flex: 4 1;
|
||||
flex: 4 2;
|
||||
}
|
||||
|
||||
&--narrow{
|
||||
flex: 2 0;
|
||||
flex: 2 1;
|
||||
}
|
||||
|
||||
&--narrower{
|
||||
flex: 1 0;
|
||||
flex: 1 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--buttons{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.LP-Form__Button{
|
||||
flex-grow: 0;
|
||||
padding-left: 0;
|
||||
min-width: 130px;
|
||||
|
||||
.LP-Link{
|
||||
display:contents;
|
||||
}
|
||||
}
|
||||
|
||||
.LP-Form__InfoText{
|
||||
.LP-Paragraph{
|
||||
font-family: $-primary-sans-serif-font;
|
||||
color: $-grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $-viewport-medium){
|
||||
.LP-Form{
|
||||
.LP-Form__Fieldset{
|
||||
min-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $-viewport-small){
|
||||
.LP-Form{
|
||||
.LP-Form__Fieldset{
|
||||
.LP-Form__Composition--breakable{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -59,9 +96,20 @@
|
||||
justify-content: space-between;
|
||||
|
||||
.LP-Form__Field{
|
||||
flex: 3 1 100px;
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
&:not(.LP-Form__Button){
|
||||
flex: 3 1 100px;
|
||||
padding: 12px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.LP-Form__Button{
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
&--buttons{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -37,6 +37,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="LP-Form__Composition">
|
||||
<div class="LP-Form__Field LP-Form__InfoText">
|
||||
<p class="LP-Paragraph">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="LP-Form__Composition">
|
||||
<div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
|
||||
<label for="input123" class="LP-Input__Label">Postal Code</label>
|
||||
@ -48,5 +54,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="LP-Form__Composition LP-Form__Composition--buttons">
|
||||
<div class="LP-Form__Field LP-Form__Button LP-Input">
|
||||
<input type="submit" class="LP-Button" value="Submit"/>
|
||||
</div>
|
||||
<div class="LP-Form__Field LP-Form__Button LP-Input LP-Input">
|
||||
<button class="LP-Button LP-Button--cancel">Kenschäll</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
</form>
|
Loading…
Reference in New Issue
Block a user