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);
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;
}

41
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,9 +49,17 @@
</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">
<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>
<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">
@ -62,26 +70,5 @@
</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>
</div>
</li>
</ul>

76
public/main.css
View File

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

2
public/main.css.map
View File

File diff suppressed because one or more lines are too long