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 @@ \ 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 {