diff --git a/components/01_Atoms/input/_input.scss b/components/01_Atoms/input/_input.scss
index b3e6916..fec56e3 100644
--- a/components/01_Atoms/input/_input.scss
+++ b/components/01_Atoms/input/_input.scss
@@ -8,7 +8,7 @@
.LP-Input__Field{
border: none;
border-bottom: 1px solid $-grey;
- padding: 8px;
+ padding: 8px 0;
margin-bottom: $-margin-bottom;
&:focus, &:active, &:invalid{
diff --git a/components/01_Atoms/input/input.hbs b/components/01_Atoms/input/input.hbs
index 8284c54..15cd5a3 100644
--- a/components/01_Atoms/input/input.hbs
+++ b/components/01_Atoms/input/input.hbs
@@ -1,6 +1,6 @@
-
{{#if disabled}}
disabled="disabled"
{{/if}}
diff --git a/components/03_Organisms/form/_form.scss b/components/03_Organisms/form/_form.scss
index ae1b94c..fa2ba85 100644
--- a/components/03_Organisms/form/_form.scss
+++ b/components/03_Organisms/form/_form.scss
@@ -1,11 +1,20 @@
.LP-Form{
- display: flex;
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;
max-width: 1200px;
min-width: $-viewport-medium;
@@ -16,55 +25,64 @@
font-size: 21px;
}
+ }
+
+ .LP-Form__Composition{
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ gap: 30px;
- .LP-Form__Composition{
- display: flex;
- flex-direction: row;
- justify-content: space-between;
-
- .LP-Form__Field{
- flex: 3 2 100px;
- padding: 6px 15px;
+ &--buttons{
+ gap: 10px;
+ }
+
+ .LP-Form__Field{
+ flex: 3 2 100px;
+ padding: 6px 0;
- &--wider{
- flex: 5 2;
- }
+ &--wider{
+ flex: 5 2;
+ }
- &--wide{
- flex: 4 2;
- }
+ &--wide{
+ flex: 4 2;
+ }
- &--narrow{
- flex: 2 1;
- }
+ &--narrow{
+ flex: 2 1;
+ }
- &--narrower{
- flex: 1 2;
- }
- }
+ &--narrower{
+ flex: 1 2;
+ }
+
+ &--static{
+ flex: 0 0;
+ }
+ }
- &--buttons{
- justify-content: flex-end;
- }
+ &--buttons{
+ justify-content: flex-end;
+ }
- .LP-Form__Button{
- flex-grow: 0;
- padding-left: 0;
- min-width: 130px;
+ .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;
- }
- }
- }
- }
+ .LP-Link{
+ display:contents;
+ }
+ }
+
+ .LP-Form__InfoText{
+ .LP-Paragraph{
+ font-family: $-primary-sans-serif-font;
+ color: $-grey;
+ }
+ }
+ }
}
@media(max-width: $-viewport-medium){
@@ -88,7 +106,7 @@
}
@media(max-width: $-viewport-extra-small){
- .LP-Form{
+ .LP-Form :not(.LP-Form--inline){
.LP-Form__Fieldset{
.LP-Form__Composition{
display: flex;
diff --git a/components/03_Organisms/form/form.hbs b/components/03_Organisms/form/form.hbs
index 8634806..b33caac 100644
--- a/components/03_Organisms/form/form.hbs
+++ b/components/03_Organisms/form/form.hbs
@@ -50,7 +50,7 @@
-
+
diff --git a/components/03_Organisms/linkList/_linkList.scss b/components/03_Organisms/linkList/_linkList.scss
index 500874b..0cb543c 100644
--- a/components/03_Organisms/linkList/_linkList.scss
+++ b/components/03_Organisms/linkList/_linkList.scss
@@ -12,15 +12,24 @@
position: relative;
&--add{
- input[type=checkbox]:checked ~ .LP-LinkList__Add{
- display: block;
+ .LP-LinkList__AddTrigger{
+ display: none;
+ &:checked{
+ & ~ .LP-LinkList__AddPlaceHolder{
+ visibility: hidden;
+ }
+ & ~ .LP-LinkList__Add{
+ display: block;
+ }
+ }
}
.LP-LinkList__Add{
position: absolute;
- top: 7px;
- display: none;
-
+ top: 3px;
+ display: none;
+ width: 100%;
+
.LP-Form__Fieldset{
min-width:unset;
}
diff --git a/components/03_Organisms/linkList/linkList.hbs b/components/03_Organisms/linkList/linkList.hbs
index 68829ec..dfeb108 100644
--- a/components/03_Organisms/linkList/linkList.hbs
+++ b/components/03_Organisms/linkList/linkList.hbs
@@ -7,34 +7,37 @@
Google Maps
OSM
-
-
\ No newline at end of file
diff --git a/public/main.css b/public/main.css
index c2b8c50..d6ec1bc 100644
--- a/public/main.css
+++ b/public/main.css
@@ -178,7 +178,7 @@ body {
.LP-Input .LP-Input__Field {
border: none;
border-bottom: 1px solid #565656;
- padding: 8px;
+ padding: 8px 0;
margin-bottom: 30px; }
.LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid {
margin-bottom: 29px;
@@ -594,12 +594,17 @@ body {
width: calc(100% - 1px);
margin-top: 12px;
position: relative; }
- .LP-LinkList__List .LP-LinkList__Item--add input[type=checkbox]:checked ~ .LP-LinkList__Add {
- display: block; }
+ .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger {
+ display: none; }
+ .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger:checked ~ .LP-LinkList__AddPlaceHolder {
+ visibility: hidden; }
+ .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger:checked ~ .LP-LinkList__Add {
+ display: block; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add {
position: absolute;
- top: 7px;
- display: none; }
+ top: 3px;
+ display: none;
+ width: 100%; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add .LP-Form__Fieldset {
min-width: unset; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add .LP-Form {
@@ -656,11 +661,16 @@ body {
background-color: inherit; }
.LP-Form {
- display: flex;
flex-direction: column;
align-items: center; }
+ .LP-Form--inline {
+ padding: 0 10px; }
+ .LP-Form--inline .LP-Form__Fieldset .LP-Form__Composition {
+ gap: 10px; }
.LP-Form .LP-Form__Fieldset {
border: none;
+ padding: 0;
+ margin: 0;
max-width: 1200px;
min-width: 750px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Legend {
@@ -668,32 +678,37 @@ body {
padding: 0;
font-family: Montserrat, Helvetica, sans-serif;
font-size: 21px; }
- .LP-Form .LP-Form__Fieldset .LP-Form__Composition {
- display: flex;
- flex-direction: row;
- justify-content: space-between; }
- .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
- flex: 3 2 100px;
- padding: 6px 15px; }
- .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider {
- flex: 5 2; }
- .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide {
- flex: 4 2; }
- .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow {
- flex: 2 1; }
- .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower {
- flex: 1 2; }
- .LP-Form .LP-Form__Fieldset .LP-Form__Composition--buttons {
- justify-content: flex-end; }
- .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button {
- flex-grow: 0;
- padding-left: 0;
- min-width: 130px; }
- .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button .LP-Link {
- display: contents; }
- .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__InfoText .LP-Paragraph {
- font-family: Montserrat, Helvetica, sans-serif;
- color: #565656; }
+ .LP-Form .LP-Form__Composition {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ gap: 30px; }
+ .LP-Form .LP-Form__Composition--buttons {
+ gap: 10px; }
+ .LP-Form .LP-Form__Composition .LP-Form__Field {
+ flex: 3 2 100px;
+ padding: 6px 0; }
+ .LP-Form .LP-Form__Composition .LP-Form__Field--wider {
+ flex: 5 2; }
+ .LP-Form .LP-Form__Composition .LP-Form__Field--wide {
+ flex: 4 2; }
+ .LP-Form .LP-Form__Composition .LP-Form__Field--narrow {
+ flex: 2 1; }
+ .LP-Form .LP-Form__Composition .LP-Form__Field--narrower {
+ flex: 1 2; }
+ .LP-Form .LP-Form__Composition .LP-Form__Field--static {
+ flex: 0 0; }
+ .LP-Form .LP-Form__Composition--buttons {
+ justify-content: flex-end; }
+ .LP-Form .LP-Form__Composition .LP-Form__Button {
+ flex-grow: 0;
+ padding-left: 0;
+ min-width: 130px; }
+ .LP-Form .LP-Form__Composition .LP-Form__Button .LP-Link {
+ display: contents; }
+ .LP-Form .LP-Form__Composition .LP-Form__InfoText .LP-Paragraph {
+ font-family: Montserrat, Helvetica, sans-serif;
+ color: #565656; }
@media (max-width: 750px) {
.LP-Form .LP-Form__Fieldset {
@@ -706,16 +721,16 @@ body {
justify-content: space-between; } }
@media (max-width: 450px) {
- .LP-Form .LP-Form__Fieldset .LP-Form__Composition {
+ .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition {
display: flex;
flex-direction: column;
justify-content: space-between; }
- .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field:not(.LP-Form__Button) {
+ .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field:not(.LP-Form__Button) {
flex: 3 1 100px;
padding: 12px 15px; }
- .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button {
+ .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button {
padding: 0 15px; }
- .LP-Form .LP-Form__Fieldset .LP-Form__Composition--buttons {
+ .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition--buttons {
justify-content: flex-end; } }
.LP-ImageGrid .LP-ImageGrid__List {