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

#50 Restyling LinkList and Removing Add Item Form

Browse Source
This commit is contained in:
reverend
2021-10-24 16:03:16 +02:00
parent b264b3a559
commit db13ef4787
4 changed files with 61 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
components/03_Organisms/linkList/_linkList.scss
View File

@@ -10,70 +10,39 @@
font-size: calc(var(--itemHeight) * .75);
line-height: 1em;
color: var(--icon-color);
transition: color .1s;
transition: color .2s;
}
.LP-LinkList__Item{
font-weight: 500;
--color: #{$-grey};
border-left: 1px solid $-light-brown;
transition: background .1s;
transition: background .2s;
height: 100%;
@include RV-Alignment--verticalCenter;
&:hover {
background-color: $-almost-white;
background-color: $-beige;
--icon-color: #{$-grey};
--color: #{$-almost-white};
.LP-LinkList__ItemHover {
opacity: 1;
}
}
&--addItem {
background-color: $-almost-white;
font-weight: bold;
}
}
.LP-Link {
@include RV-Flex__Item;
padding-left: $-spacing-medium;
color: $-grey;
}
.LP-LinkAdd{
height: 0;
}
.LP-LinkAdd__Container{
position: relative;
top: -39px;
.LP-Form__Fieldset{
min-width:unset;
}
.LP-Form{
display: block;
min-width: 0px;
}
color: var(--color);
transition: color .2s;
}
}
.LP-LinkAdd{
display: none;
}
.LP-LinkAdd__Trigger {
display: none;
}
.LP-LinkAdd__TriggerLabel{
cursor: pointer;
display: contents;
}
.LP-LinkAdd__Trigger:checked, .LP-LinkAdd__Trigger:checked + .LP-LinkAdd__TriggerLabel{
display: none;
}
.LP-LinkAdd__Trigger:checked ~ .LP-LinkAdd{
display: block;
}

59
components/03_Organisms/linkList/linkList.hbs
View File

@@ -12,7 +12,7 @@
<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
<span class="LP-Text RV-Iconized">
<span class="RV-Iconized__Text">
TIM Online
Google Maps
</span>
<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
<i class="mdi mdi-map-outline"></i>
@@ -22,10 +22,10 @@
<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
<span class="LP-Text RV-Iconized">
<span class="RV-Iconized__Text">
Google Maps
Photoalbum
</span>
<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
<i class="mdi mdi-map-outline"></i>
<i class="mdi mdi-camera-burst"></i>
</span>
</span></a>
</li>
@@ -49,39 +49,26 @@
</span>
</span></a>
</li>
<li class="LP-LinkList__Item">
<input type="checkbox" id="checkbox123" class="LP-LinkAdd__Trigger" />
<label for="checkbox123" class="LP-LinkAdd__TriggerLabel">
<a href="#" class="LP-Link">
<span class="LP-Text RV-Iconized">
<span class="RV-Iconized__Text">
Link Hinzufügen
</span>
<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
<i class="mdi mdi-plus"></i>
</span>
</span>
</a>
</label>
<div class="LP-LinkAdd">
<span class="LP-LinkAdd__Container">
<form class="LP-Form LP-Form--inline">
<fieldset class="LP-Form__Fieldset">
<legend class="LP-Form__Legend">Basic data</legend>
<div class="LP-Form__Composition LP-Form__Composition--buttons">
<div class="LP-Form__Field LP-Form__Button LP-Input">
<input type="submit" class="LP-Button" value="Submit" />
</div>
<div class="LP-Form__Field LP-Form__Field--narrower">
<div class="LP-Input">
<label for="input123" class="LP-Input__Label">Link URL</label>
<input type="text" id="input123" class="LP-Input__Field" />
</div>
</div>
</div>
</fieldset>
</form>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
<span class="LP-Text RV-Iconized">
<span class="RV-Iconized__Text">
Toller externer Blog
</span>
</div>
<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
<i class="mdi mdi-open-in-new"></i>
</span>
</span></a>
</li>
<li class="LP-LinkList__Item LP-LinkList__Item--addItem">
<a href="#" class="LP-Link">
<span class="LP-Text RV-Iconized">
<span class="RV-Iconized__Text">
Link Hinzufügen
</span>
<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
<i class="mdi mdi-plus"></i>
</span>
</span>
</a>
</li>
</ul>