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

CSS for tags *ough*

Browse Source
This commit is contained in:
reverend
2020-09-01 18:19:51 +02:00
parent 607de24c14
commit 179db0f9b7
8 changed files with 385 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,72 +1,90 @@
.LP-Form{
.LP-Form {
&--inline {
.LP-Form__Legend, .LP-Input__Label {
display: none;
}
&--tagging {
margin-top: 25px;
.LP-Form__Button {
@include RV-FlexRow__Item--fixedSize(max-content);
}
}
div.LP-Form__Composition {
gap: 25px;
}
}
&:not(.LP-Form--inline){
.LP-Form__Composition {
@media(max-width: $-viewport-extra-small){
@include RV-FlexRow__Container--multiRow;
}
}
&--inline {
.LP-Form__Button {
@include RV-FlexRow__Item--fixedSize(130px);
.LP-Form__Legend,
.LP-Input__Label {
display: none;
}
@media(max-width: $-viewport-extra-small) {
@include RV-FlexRow__Item--fixedSize(100%);
}
}
}
.LP-Form__Button {
@include RV-FlexRow__Item--fixedSize(max-content);
}
.LP-Form__Fieldset{
@include RV-Reset;
fieldset.LP-Form__Fieldset {
max-width: unset;
}
div.LP-Form__Composition {
padding: 0;
}
}
&:not(.LP-Form--inline) {
.LP-Form__Composition {
@media(max-width: $-viewport-extra-small) {
@include RV-FlexRow__Container--multiRow;
}
}
.LP-Form__Button {
@include RV-FlexRow__Item--fixedSize(130px);
@media(max-width: $-viewport-extra-small) {
@include RV-FlexRow__Item--fixedSize(100%);
}
}
}
.LP-Form__Fieldset {
@include RV-Reset;
max-width: 1200px;
min-width: $-viewport-medium;
@media(max-width: $-viewport-medium){
min-width: unset;
}
}
min-width: $-viewport-medium;
.LP-Form__Legend{
margin: 0;
padding: 0;
font-family: $-primary-sans-serif-font;
font-size: 21px;
}
@media(max-width: $-viewport-medium) {
min-width: unset;
}
}
.LP-Form__Composition{
@include RV-FlexRow__Container;
@include RV-Spacing__Inner--small('');
.LP-Form__Legend {
margin: 0;
padding: 0;
font-family: $-primary-sans-serif-font;
font-size: 21px;
}
&--breakable {
@media(max-width: $-viewport-small){
@include RV-FlexRow__Container--multiRow;
}
}
.LP-Form__Composition {
@include RV-FlexRow__Container;
@include RV-Spacing__Inner--small('');
&--buttons{
justify-content: flex-end;
@include RV-Spacing__Inner--small;
}
}
&--breakable {
@media(max-width: $-viewport-small) {
@include RV-FlexRow__Container--multiRow;
}
}
.LP-Form__Field{
@include RV-FlexRow__Item;
}
.LP-Form__InfoText{
.LP-Paragraph{
font-family: $-primary-sans-serif-font;
color: $-grey;
}
}
&--buttons {
justify-content: flex-end;
@include RV-Spacing__Inner--small;
}
}
.LP-Form__Field {
@include RV-FlexRow__Item;
}
.LP-Form__InfoText {
.LP-Paragraph {
font-family: $-primary-sans-serif-font;
color: $-grey;
}
}
}