diff --git a/components/main.scss b/components/main.scss index 8044977..dc27ae3 100644 --- a/components/main.scss +++ b/components/main.scss @@ -47,11 +47,12 @@ body{ .LP-Main{ display: table; flex-direction: row-reverse; - height: calc(100% - 61px); + height: calc(100% - 61px); + width: 100%; .LP-Main__Content{ display: table-cell; - width: calc(100% -300px); + width: calc(100% - 300px); min-height: 1px; padding: 25px; } diff --git a/public/main.css b/public/main.css index a87d705..40aa8ea 100644 --- a/public/main.css +++ b/public/main.css @@ -18,10 +18,11 @@ body { .LP-Main { display: table; flex-direction: row-reverse; - height: calc(100% - 61px); } + height: calc(100% - 61px); + width: 100%; } .LP-Main .LP-Main__Content { display: table-cell; - width: calc(100% -300px); + width: calc(100% - 300px); min-height: 1px; padding: 25px; } .LP-Main .LP-Main__Sidebar { @@ -99,12 +100,17 @@ body { border: none; padding: 8px 14px; border-radius: 2px; - font-weight: bold; } + font-weight: bold; + cursor: pointer; } .LP-Button:active { background-color: #76323F; color: #f9f9f9; } .LP-Button--cancel { - background-color: #f9f9f9; } + background-color: #565656; + color: #f9f9f9; } + .LP-Button--cancel:active { + color: #565656; + background-color: #f9f9f9; } .LP-Form .LP-Form__Checkbox { display: none; } @@ -132,6 +138,17 @@ body { background-color: #f9f9f9; border-radius: 3px 3px 0 0; box-shadow: none; } + .LP-Input .LP-Input__Field[type=submit] { + background-color: #C09F80; + color: #565656; + border: none; + padding: 8px 14px; + border-radius: 2px; + font-weight: bold; + cursor: pointer; } + .LP-Input .LP-Input__Field[type=submit]:active { + background-color: #76323F; + color: #f9f9f9; } .LP-Input .LP-Input__Label { font-family: Montserrat, Helvetica, sans-serif; font-size: 16px; } @@ -459,28 +476,49 @@ body { .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover { background-color: inherit; } -.LP-Form .LP-Form__Fieldset { - border: none; } - .LP-Form .LP-Form__Fieldset .LP-Form__Legend { - margin: 0; - 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 1 100px; - padding: 6px 15px; } - .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider { - flex: 5 1; } - .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide { - flex: 4 1; } - .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow { - flex: 2 0; } - .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower { - flex: 1 0; } +.LP-Form { + display: flex; + flex-direction: column; + align-items: center; } + .LP-Form .LP-Form__Fieldset { + border: none; + max-width: 1200px; + min-width: 750px; } + .LP-Form .LP-Form__Fieldset .LP-Form__Legend { + margin: 0; + 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; } + +@media (max-width: 750px) { + .LP-Form .LP-Form__Fieldset { + min-width: unset; } } @media (max-width: 650px) { .LP-Form .LP-Form__Fieldset .LP-Form__Composition--breakable { @@ -493,9 +531,13 @@ body { display: flex; flex-direction: column; justify-content: space-between; } - .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field { + .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field:not(.LP-Form__Button) { flex: 3 1 100px; - padding: 12px 15px; } } + padding: 12px 15px; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button { + padding: 0 15px; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition--buttons { + justify-content: flex-end; } } .LP-ImageGrid .LP-ImageGrid__List { list-style-type: none; @@ -558,4 +600,5 @@ body { width: 100%; height: auto; margin: 0; - padding: 0; } } + padding: 0; + margin-bottom: 25px; } }