Form squishiness and Button layout
This commit is contained in:
		@@ -1,6 +1,13 @@
 | 
				
			|||||||
.LP-Form{
 | 
					.LP-Form{
 | 
				
			||||||
 | 
						display: flex;
 | 
				
			||||||
 | 
						flex-direction: column;
 | 
				
			||||||
 | 
						align-items: center;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    .LP-Form__Fieldset{
 | 
					    .LP-Form__Fieldset{
 | 
				
			||||||
        border: none;
 | 
							border: none;
 | 
				
			||||||
 | 
							
 | 
				
			||||||
 | 
							max-width: 1200px;
 | 
				
			||||||
 | 
							min-width: $-viewport-medium;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        .LP-Form__Legend{
 | 
					        .LP-Form__Legend{
 | 
				
			||||||
            margin: 0;
 | 
					            margin: 0;
 | 
				
			||||||
@@ -9,42 +16,72 @@
 | 
				
			|||||||
			font-size: 21px;
 | 
								font-size: 21px;
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        .LP-Form__Composition{
 | 
					        .LP-Form__Composition{
 | 
				
			||||||
            display: flex;
 | 
					            display: flex;
 | 
				
			||||||
            flex-direction: row;
 | 
					            flex-direction: row;
 | 
				
			||||||
            justify-content: space-between;
 | 
								justify-content: space-between;
 | 
				
			||||||
			
 | 
								
 | 
				
			||||||
            .LP-Form__Field{
 | 
					            .LP-Form__Field{
 | 
				
			||||||
                flex: 3 1 100px;
 | 
					                flex: 3 2 100px;
 | 
				
			||||||
                padding: 6px 15px;
 | 
					                padding: 6px 15px;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                &--wider{
 | 
					                &--wider{
 | 
				
			||||||
                    flex: 5 1;
 | 
					                    flex: 5 2;
 | 
				
			||||||
                }
 | 
					                }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                &--wide{
 | 
					                &--wide{
 | 
				
			||||||
                    flex: 4 1;
 | 
					                    flex: 4 2;
 | 
				
			||||||
                }
 | 
					                }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                &--narrow{
 | 
					                &--narrow{
 | 
				
			||||||
                    flex: 2 0;
 | 
					                    flex: 2 1;
 | 
				
			||||||
                }
 | 
					                }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                &--narrower{
 | 
					                &--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){
 | 
					@media(max-width: $-viewport-small){
 | 
				
			||||||
    .LP-Form{
 | 
					    .LP-Form{
 | 
				
			||||||
        .LP-Form__Fieldset{
 | 
					        .LP-Form__Fieldset{
 | 
				
			||||||
            .LP-Form__Composition--breakable{
 | 
					            .LP-Form__Composition--breakable{
 | 
				
			||||||
                display: flex;
 | 
					                display: flex;
 | 
				
			||||||
                flex-direction: column;
 | 
					                flex-direction: column;
 | 
				
			||||||
                justify-content: space-between;
 | 
									justify-content: space-between;
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
@@ -59,9 +96,20 @@
 | 
				
			|||||||
                justify-content: space-between;
 | 
					                justify-content: space-between;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                .LP-Form__Field{
 | 
					                .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>
 | 
					        </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__Composition">
 | 
				
			||||||
            <div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
 | 
					            <div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
 | 
				
			||||||
                <label for="input123" class="LP-Input__Label">Postal Code</label>
 | 
					                <label for="input123" class="LP-Input__Label">Postal Code</label>
 | 
				
			||||||
@@ -48,5 +54,14 @@
 | 
				
			|||||||
            </div>
 | 
					            </div>
 | 
				
			||||||
        </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>
 | 
					    </fieldset>
 | 
				
			||||||
</form>
 | 
					</form>
 | 
				
			||||||
		Reference in New Issue
	
	Block a user