diff --git a/components/01_Atoms/input/_input.scss b/components/01_Atoms/input/_input.scss index a8ed887..30a0e99 100644 --- a/components/01_Atoms/input/_input.scss +++ b/components/01_Atoms/input/_input.scss @@ -10,6 +10,7 @@ border-bottom: 1px solid $-grey; padding: 8px 0; margin-bottom: $-margin-bottom; + width: 100%; &:focus, &:active, &:invalid{ margin-bottom: $-margin-bottom - 1px; diff --git a/components/03_Organisms/form/_form.scss b/components/03_Organisms/form/_form.scss index 8b54bf0..fb46870 100644 --- a/components/03_Organisms/form/_form.scss +++ b/components/03_Organisms/form/_form.scss @@ -1,5 +1,31 @@ .LP-Form{ + &--inline { + .LP-Form__Legend, .LP-Input__Label { + display: none; + } + + .LP-Form__Button { + @include RV-FlexRow__Item--fixedSize(max-content); + } + } + + &: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; @@ -27,10 +53,6 @@ } } - @media(max-width: $-viewport-extra-small){ - @include RV-FlexRow__Container--multiRow; - } - &--buttons{ justify-content: flex-end; @include RV-Spacing__Inner--small; @@ -40,14 +62,6 @@ .LP-Form__Field{ @include RV-FlexRow__Item; } - - .LP-Form__Button{ - @include RV-FlexRow__Item--fixedSize(130px); - - @media(max-width: $-viewport-extra-small) { - @include RV-FlexRow__Item--fixedSize(100%); - } - } .LP-Form__InfoText{ .LP-Paragraph{ diff --git a/components/03_Organisms/form/form.hbs b/components/03_Organisms/form/form.hbs index 2468f2a..0291e21 100644 --- a/components/03_Organisms/form/form.hbs +++ b/components/03_Organisms/form/form.hbs @@ -1,3 +1,23 @@ + +
+
+ Basic data +
+
+ +
+
+
+ + +
+
+
+ +
+
+ +
Basic data @@ -63,22 +83,5 @@ -
-
- - -
-
-
-
- -
-
-
- -
-
-
-
\ No newline at end of file diff --git a/components/rcss.bundled.scss b/components/rcss.bundled.scss index eef404a..5e2b117 100644 --- a/components/rcss.bundled.scss +++ b/components/rcss.bundled.scss @@ -150,7 +150,7 @@ $-spacing-large: 35px; @mixin RV-FlexRow__Item { @include RV-Alignment; - min-width: 0; + min-width: min-content; width: 100%; &,&--normal { diff --git a/public/main.css b/public/main.css index d2c6713..360ce62 100644 --- a/public/main.css +++ b/public/main.css @@ -38,7 +38,7 @@ flex-direction: column; } .RV-FlexRow__Item { - min-width: 0; + min-width: min-content; width: 100%; } .RV-FlexRow__Item__Container { display: grid; } @@ -600,7 +600,8 @@ body { border: none; border-bottom: 1px solid #565656; padding: 8px 0; - margin-bottom: 30px; } + margin-bottom: 30px; + width: 100%; } .LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid { margin-bottom: 29px; border-bottom: 2px solid #76323F; @@ -1094,6 +1095,31 @@ body { .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover { background-color: inherit; } +.LP-Form--inline .LP-Form__Legend, .LP-Form--inline .LP-Input__Label { + display: none; } + +.LP-Form--inline .LP-Form__Button { + flex-grow: 0; + flex-shrink: 0; + width: min-content; + flex-basis: max-content; } + +@media (max-width: 450px) { + .LP-Form:not(.LP-Form--inline) .LP-Form__Composition { + flex-wrap: wrap; } } + +.LP-Form:not(.LP-Form--inline) .LP-Form__Button { + flex-grow: 0; + flex-shrink: 0; + width: min-content; + flex-basis: 130px; } + @media (max-width: 450px) { + .LP-Form:not(.LP-Form--inline) .LP-Form__Button { + flex-grow: 0; + flex-shrink: 0; + width: min-content; + flex-basis: 100%; } } + .LP-Form .LP-Form__Fieldset { margin: 0; padding: 0; @@ -1129,9 +1155,6 @@ body { @media (max-width: 650px) { .LP-Form .LP-Form__Composition--breakable { flex-wrap: wrap; } } - @media (max-width: 450px) { - .LP-Form .LP-Form__Composition { - flex-wrap: wrap; } } .LP-Form .LP-Form__Composition--buttons { justify-content: flex-end; padding: 10px; } @@ -1139,7 +1162,7 @@ body { gap: 10px; } .LP-Form .LP-Form__Field { - min-width: 0; + min-width: min-content; width: 100%; } .LP-Form .LP-Form__Field__Container { display: grid; } @@ -1187,18 +1210,6 @@ body { width: min-content; flex-basis: 100px; } -.LP-Form .LP-Form__Button { - flex-grow: 0; - flex-shrink: 0; - width: min-content; - flex-basis: 130px; } - @media (max-width: 450px) { - .LP-Form .LP-Form__Button { - flex-grow: 0; - flex-shrink: 0; - width: min-content; - flex-basis: 100%; } } - .LP-Form .LP-Form__InfoText .LP-Paragraph { font-family: Montserrat, Helvetica, sans-serif; color: #565656; }