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
Show Stats 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); font-size: calc(var(--itemHeight) * .75);
line-height: 1em; line-height: 1em;
color: var(--icon-color); color: var(--icon-color);
transition: color .1s; transition: color .2s;
} }
.LP-LinkList__Item{ .LP-LinkList__Item{
font-weight: 500;
--color: #{$-grey};
border-left: 1px solid $-light-brown; border-left: 1px solid $-light-brown;
transition: background .1s; transition: background .2s;
height: 100%; height: 100%;
@include RV-Alignment--verticalCenter; @include RV-Alignment--verticalCenter;
&:hover { &:hover {
background-color: $-almost-white; background-color: $-beige;
--icon-color: #{$-grey}; --icon-color: #{$-grey};
--color: #{$-almost-white};
.LP-LinkList__ItemHover { .LP-LinkList__ItemHover {
opacity: 1; opacity: 1;
} }
} }
&--addItem {
background-color: $-almost-white;
font-weight: bold;
}
} }
.LP-Link { .LP-Link {
@include RV-Flex__Item; @include RV-Flex__Item;
padding-left: $-spacing-medium; padding-left: $-spacing-medium;
color: $-grey; color: var(--color);
} transition: color .2s;
.LP-LinkAdd{
height: 0;
}
.LP-LinkAdd__Container{
position: relative;
top: -39px;
.LP-Form__Fieldset{
min-width:unset;
}
.LP-Form{
display: block;
min-width: 0px;
}
} }
} }
.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"> <li class="LP-LinkList__Item"><a href="#" class="LP-Link">
<span class="LP-Text RV-Iconized"> <span class="LP-Text RV-Iconized">
<span class="RV-Iconized__Text"> <span class="RV-Iconized__Text">
TIM Online Google Maps
</span> </span>
<span class="RV-Iconized__Icon RV-Iconized__Icon--left"> <span class="RV-Iconized__Icon RV-Iconized__Icon--left">
<i class="mdi mdi-map-outline"></i> <i class="mdi mdi-map-outline"></i>
@ -22,10 +22,10 @@
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"> <li class="LP-LinkList__Item"><a href="#" class="LP-Link">
<span class="LP-Text RV-Iconized"> <span class="LP-Text RV-Iconized">
<span class="RV-Iconized__Text"> <span class="RV-Iconized__Text">
Google Maps Photoalbum
</span> </span>
<span class="RV-Iconized__Icon RV-Iconized__Icon--left"> <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>
</span></a> </span></a>
</li> </li>
@ -49,39 +49,26 @@
</span> </span>
</span></a> </span></a>
</li> </li>
<li class="LP-LinkList__Item"> <li class="LP-LinkList__Item"><a href="#" class="LP-Link">
<input type="checkbox" id="checkbox123" class="LP-LinkAdd__Trigger" /> <span class="LP-Text RV-Iconized">
<label for="checkbox123" class="LP-LinkAdd__TriggerLabel"> <span class="RV-Iconized__Text">
<a href="#" class="LP-Link"> Toller externer Blog
<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>
</span> </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> </li>
</ul> </ul>

76
public/main.css
View File

@ -1,4 +1,3 @@
@charset "UTF-8";
.RV-Dummy { .RV-Dummy {
overflow: hidden; overflow: hidden;
background-color: #F4A460; background-color: #F4A460;
@ -83,27 +82,27 @@
.RV-AspectRatio--1to2 { .RV-AspectRatio--1to2 {
--aspectX: 1; --aspectX: 1;
--aspectY: 2; --aspectY: 2;
padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); padding-top: calc(100% * var(--aspectY) / var(--aspectX));
} }
.RV-AspectRatio--2to1 { .RV-AspectRatio--2to1 {
--aspectX: 2; --aspectX: 2;
--aspectY: 1; --aspectY: 1;
padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); padding-top: calc(100% * var(--aspectY) / var(--aspectX));
} }
.RV-AspectRatio--3to2 { .RV-AspectRatio--3to2 {
--aspectX: 3; --aspectX: 3;
--aspectY: 2; --aspectY: 2;
padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); padding-top: calc(100% * var(--aspectY) / var(--aspectX));
} }
.RV-AspectRatio--4to3 { .RV-AspectRatio--4to3 {
--aspectX: 4; --aspectX: 4;
--aspectY: 3; --aspectY: 3;
padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); padding-top: calc(100% * var(--aspectY) / var(--aspectX));
} }
.RV-AspectRatio--16to9 { .RV-AspectRatio--16to9 {
--aspectX: 16; --aspectX: 16;
--aspectY: 9; --aspectY: 9;
padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); padding-top: calc(100% * var(--aspectY) / var(--aspectX));
} }
/** /**
@ -315,7 +314,7 @@ html {
overflow: hidden; overflow: hidden;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
flex-basis: calc(100%/3); flex-basis: 33.3333333333%;
} }
.RV-Flex__Item--quarter { .RV-Flex__Item--quarter {
overflow: hidden; overflow: hidden;
@ -371,7 +370,7 @@ html {
.RV-BreakPoint__Item { .RV-BreakPoint__Item {
flex-grow: 5; flex-grow: 5;
flex-shrink: 5; flex-shrink: 5;
flex-basis: calc(var(--breakPoint) * 999 - 100% * 999); flex-basis: calc(var(--breakPoint) * 999 - 99900%);
overflow: hidden; overflow: hidden;
--outer-spacing: 0; --outer-spacing: 0;
--inner-spacing: 0; --inner-spacing: 0;
@ -412,7 +411,7 @@ html {
gap: var(--gap); gap: var(--gap);
} }
.RV-Grid__Item { .RV-Grid__Item {
height: calc(var(--itemHeight) - calc(2*var(--inner-spacing))); height: calc(var(--itemHeight) - 2 * var(--inner-spacing));
} }
.RV-Grid__Item > * { .RV-Grid__Item > * {
height: 100%; height: 100%;
@ -926,7 +925,7 @@ body {
height: 1em; height: 1em;
width: 1em; width: 1em;
border: 1px solid #565656; border: 1px solid #565656;
padding: 0 calc(.5em + 2px); padding: 0 calc(0.5em + 2px);
margin-right: 0.7em; margin-right: 0.7em;
} }
@ -26397,7 +26396,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
} }
.mdi-blank::before { .mdi-blank::before {
content: ""; content: "\f68c";
visibility: hidden; visibility: hidden;
} }
@ -26895,7 +26894,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
justify-content: center; justify-content: center;
} }
.LP-PlaceGrid .LP-PlaceGrid__Grid .LP-PlaceGrid__Item { .LP-PlaceGrid .LP-PlaceGrid__Grid .LP-PlaceGrid__Item {
height: calc(var(--itemHeight) - calc(2*var(--inner-spacing))); height: calc(var(--itemHeight) - 2 * var(--inner-spacing));
} }
.LP-PlaceGrid .LP-PlaceGrid__Grid .LP-PlaceGrid__Item > * { .LP-PlaceGrid .LP-PlaceGrid__Grid .LP-PlaceGrid__Item > * {
height: 100%; height: 100%;
@ -26945,65 +26944,38 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
--icon-color: #C09F80; --icon-color: #C09F80;
} }
.LP-LinkList .RV-Iconized__Icon { .LP-LinkList .RV-Iconized__Icon {
font-size: calc(var(--itemHeight) * .75); font-size: calc(var(--itemHeight) * 0.75);
line-height: 1em; line-height: 1em;
color: var(--icon-color); color: var(--icon-color);
transition: color 0.1s; transition: color 0.2s;
} }
.LP-LinkList .LP-LinkList__Item { .LP-LinkList .LP-LinkList__Item {
font-weight: 500;
--color: #565656;
border-left: 1px solid #C09F80; border-left: 1px solid #C09F80;
transition: background 0.1s; transition: background 0.2s;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.LP-LinkList .LP-LinkList__Item:hover { .LP-LinkList .LP-LinkList__Item:hover {
background-color: #f9f9f9; background-color: #D7CEC7;
--icon-color: #565656; --icon-color: #565656;
--color: #f9f9f9;
} }
.LP-LinkList .LP-LinkList__Item:hover .LP-LinkList__ItemHover { .LP-LinkList .LP-LinkList__Item:hover .LP-LinkList__ItemHover {
opacity: 1; opacity: 1;
} }
.LP-LinkList .LP-LinkList__Item--addItem {
background-color: #f9f9f9;
font-weight: bold;
}
.LP-LinkList .LP-Link { .LP-LinkList .LP-Link {
flex-grow: 5; flex-grow: 5;
flex-shrink: 5; flex-shrink: 5;
padding-left: 25px; padding-left: 25px;
color: #565656; color: var(--color);
} transition: color 0.2s;
.LP-LinkList .LP-LinkAdd {
height: 0;
}
.LP-LinkList .LP-LinkAdd__Container {
position: relative;
top: -39px;
}
.LP-LinkList .LP-LinkAdd__Container .LP-Form__Fieldset {
min-width: unset;
}
.LP-LinkList .LP-LinkAdd__Container .LP-Form {
display: block;
min-width: 0px;
}
.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;
} }
/*# sourceMappingURL=main.css.map */ /*# sourceMappingURL=main.css.map */

2
public/main.css.map
View File

File diff suppressed because one or more lines are too long