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

Form fine tuning and link list add

Browse Source
This commit is contained in:
reverend
2020-08-21 12:08:51 +02:00
parent 8fa8033be4
commit 313968fafd
7 changed files with 160 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
public/main.css
View File

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