Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Using rcss

Browse Source
This commit is contained in:
reverend
2020-08-25 15:55:02 +02:00
parent 313968fafd
commit 823d78a0ae
12 changed files with 1745 additions and 439 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
components/03_Organisms/form/_form.scss
View File

@@ -1,134 +1,58 @@
.LP-Form{
flex-direction: column;
align-items: center;
&--inline{
padding: 0 10px;
.LP-Form__Fieldset{
.LP-Form__Composition{
gap: 10px;
}
}
}
.LP-Form__Fieldset{
border: none;
padding: 0;
margin: 0;
@include RV-Reset;
max-width: 1200px;
min-width: $-viewport-medium;
.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;
gap: 30px;
&--buttons{
gap: 10px;
}
min-width: $-viewport-medium;
.LP-Form__Field{
flex: 3 2 100px;
padding: 6px 0;
@media(max-width: $-viewport-medium){
min-width: unset;
}
}
&--wider{
flex: 5 2;
}
.LP-Form__Legend{
margin: 0;
padding: 0;
font-family: $-primary-sans-serif-font;
font-size: 21px;
}
&--wide{
flex: 4 2;
}
.LP-Form__Composition{
@include RV-FlexRow__Container;
@include RV-Spacing__Inner--small('');
&--narrow{
flex: 2 1;
&--breakable {
@media(max-width: $-viewport-small){
@include RV-FlexRow__Container--multiRow;
}
}
&--narrower{
flex: 1 2;
}
&--static{
flex: 0 0;
}
@media(max-width: $-viewport-extra-small){
@include RV-FlexRow__Container--multiRow;
}
&--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;
}
@include RV-Spacing__Inner--small;
}
}
}
@media(max-width: $-viewport-medium){
.LP-Form{
.LP-Form__Fieldset{
min-width: unset;
}
}
}
.LP-Form__Field{
@include RV-FlexRow__Item;
}
@media(max-width: $-viewport-small){
.LP-Form{
.LP-Form__Fieldset{
.LP-Form__Composition--breakable{
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
}
}
.LP-Form__Button{
@include RV-FlexRow__Item--fixedSize(130px);
@media(max-width: $-viewport-extra-small){
.LP-Form :not(.LP-Form--inline){
.LP-Form__Fieldset{
.LP-Form__Composition{
display: flex;
flex-direction: column;
justify-content: space-between;
.LP-Form__Field{
&:not(.LP-Form__Button){
flex: 3 1 100px;
padding: 12px 15px;
}
}
.LP-Form__Button{
padding: 0 15px;
}
&--buttons{
justify-content: flex-end;
}
}
}
}
@media(max-width: $-viewport-extra-small) {
@include RV-FlexRow__Item--fixedSize(100%);
}
}
.LP-Form__InfoText{
.LP-Paragraph{
font-family: $-primary-sans-serif-font;
color: $-grey;
}
}
}

6
components/03_Organisms/form/form.hbs
View File

@@ -30,8 +30,8 @@
<input type="text" id="input123" class="LP-Input__Field"/>
<span class="LP-Input__Message">We won't send any stalkers, promise</span>
</div>
<div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
<label for="input123" class="LP-Input__Label">House no</label>
<div class="LP-Form__Field LP-Form__Field--narrower LP-Input">
<label for="input123" class="LP-Input__Label">No.</label>
<input type="text" id="input123" class="LP-Input__Field"/>
<span class="LP-Input__Message">Field is required</span>
</div>
@@ -45,7 +45,7 @@
<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>
<label for="input123" class="LP-Input__Label">ZIP</label>
<input type="text" id="input123" class="LP-Input__Field"/>
</div>
<div class="LP-Form__Field LP-Form__Field--wide LP-Input">