#50 Restyling LinkList and Removing Add Item Form
This commit is contained in:
parent
b264b3a559
commit
db13ef4787
@ -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;
|
||||
}
|
||||
|
@ -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>
|
@ -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 */
|
||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user