Form fine tuning and link list add
This commit is contained in:
parent
8fa8033be4
commit
313968fafd
@ -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{
|
||||
|
@ -1,6 +1,6 @@
|
||||
<div class="LP-Input LP-Input{{modifier}}">
|
||||
<label for="input123" class="LP-Input__Label">{{label}}</label>
|
||||
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"
|
||||
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}">
|
||||
{{#if disabled}}
|
||||
disabled="disabled"
|
||||
{{/if}}
|
||||
|
@ -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;
|
||||
|
@ -50,7 +50,7 @@
|
||||
</div>
|
||||
<div class="LP-Form__Field LP-Form__Field--wide LP-Input">
|
||||
<label for="input123" class="LP-Input__Label">Town</label>
|
||||
<input type="text" id="input123" class="LP-Input__Field"/>
|
||||
<input type="text" id="input123" class="LP-Input__Field"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -7,34 +7,37 @@
|
||||
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
|
||||
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
|
||||
<li class="LP-LinkList__Item LP-LinkList__Item--add">
|
||||
<input type="checkbox" id="wurstwurst" style="display: none"/>
|
||||
<label for="wurstwurst">
|
||||
<span class="LP-Link LP-Link--iconized">
|
||||
<div class="LP-Link__IconWrapper">
|
||||
<svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
|
||||
v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="LP-Text">Link hinzufügen</span>
|
||||
</span>
|
||||
<input type="checkbox" id="wurstwurst" class="LP-LinkList__AddTrigger"/>
|
||||
<label for="wurstwurst" class="LP-LinkList__AddPlaceHolder">
|
||||
<span class="LP-Link LP-Link--iconized">
|
||||
<div class="LP-Link__IconWrapper">
|
||||
<svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
|
||||
v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="LP-Text">Link hinzufügen</span>
|
||||
</span>
|
||||
</label>
|
||||
<span class="LP-LinkList__Add">
|
||||
<form class="LP-Form">
|
||||
<fieldset class="LP-Form__Fieldset">
|
||||
<div class="LP-Input">
|
||||
<button class="LP-Button">Add</button>
|
||||
</div>
|
||||
<div class="LP-Input">
|
||||
<input class="LP-Input__Field" type="url"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</span>
|
||||
<span class="LP-LinkList__Add">
|
||||
<form class="LP-Form LP-Form--inline">
|
||||
<fieldset class="LP-Form__Fieldset">
|
||||
<div class="LP-Form__Composition LP-Form__Composition">
|
||||
<div class="LP-Form__Field LP-Form__Field--static LP-Input">
|
||||
<button class="LP-Button">Add</button>
|
||||
</div>
|
||||
<div class="LP-Form__Field LP-Form__Field--wide LP-Input">
|
||||
<input class="LP-Input__Field" type="url"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user