Iconization in Linklist and inline form
This commit is contained in:
parent
7865066adb
commit
6a1e281b3e
@ -2,24 +2,35 @@
|
||||
@include RV-FlexGrid(300px, 3em);
|
||||
@include RV-ElementList;
|
||||
@include RV-Spacing__Inner--small;
|
||||
align-items: center;
|
||||
|
||||
.LP-LinkList__Item{
|
||||
border-left: 1px solid $-light-brown;
|
||||
width: calc(100% - 1px);
|
||||
overflow: hidden;
|
||||
|
||||
@include RV-Alignment--verticalCenter;
|
||||
@include RV-FlexRow__Container;
|
||||
|
||||
.LP-LinkList__ItemHover {
|
||||
opacity: 0.5;
|
||||
@include RV-Alignment--right;
|
||||
@include RV-FlexRow__Item--fixedSize(min-content);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $-almost-white;
|
||||
|
||||
.LP-LinkList__ItemHover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.LP-Link{
|
||||
height: 100%;
|
||||
@include RV-Alignment--verticalCenter;
|
||||
|
||||
>* {
|
||||
.LP-Link {
|
||||
@include RV-FlexRow__Item;
|
||||
@include RV-Spacing__Inner--small;
|
||||
}
|
||||
}
|
||||
|
||||
.LP-LinkAdd{
|
||||
height: 0;
|
||||
@ -27,7 +38,7 @@
|
||||
|
||||
.LP-LinkAdd__Container{
|
||||
position: relative;
|
||||
top: -15px;
|
||||
top: -39px;
|
||||
|
||||
|
||||
.LP-Form__Fieldset{
|
||||
@ -52,6 +63,7 @@
|
||||
|
||||
.LP-LinkAdd__TriggerLabel{
|
||||
cursor: pointer;
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.LP-LinkAdd__Trigger:checked, .LP-LinkAdd__Trigger:checked + .LP-LinkAdd__TriggerLabel{
|
||||
|
||||
@ -5,30 +5,33 @@
|
||||
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li>
|
||||
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
|
||||
<li class="LP-LinkList__Item">
|
||||
<div class="RV-FlexRow__Container">
|
||||
<a href="#" class="LP-Link RV-FlexRow__Item"><span class="LP-Text">OSM</span></a>
|
||||
<a href="#" class="LP-Link RV-FlexRow__Item RV-FlexRow__Item--fixedSize">
|
||||
<a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a>
|
||||
<a href="google.com" class="LP-Link LP-LinkList__ItemHover">
|
||||
<div class="RV-Iconized__Container RV-Iconized__Container--small">
|
||||
<svg class="RV-Iconized__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">
|
||||
<svg class="RV-Iconized__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.001 512.001"
|
||||
style="enable-background:new 0 0 512.001 512.001;" 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>
|
||||
<path d="M284.286,256.002L506.143,34.144c7.811-7.811,7.811-20.475,0-28.285c-7.811-7.81-20.475-7.811-28.285,0L256,227.717
|
||||
L34.143,5.859c-7.811-7.811-20.475-7.811-28.285,0c-7.81,7.811-7.811,20.475,0,28.285l221.857,221.857L5.858,477.859
|
||||
c-7.811,7.811-7.811,20.475,0,28.285c3.905,3.905,9.024,5.857,14.143,5.857c5.119,0,10.237-1.952,14.143-5.857L256,284.287
|
||||
l221.857,221.857c3.905,3.905,9.024,5.857,14.143,5.857s10.237-1.952,14.143-5.857c7.811-7.811,7.811-20.475,0-28.285
|
||||
L284.286,256.002z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="LP-LinkList__Item LP-LinkList__Item--add">
|
||||
<input type="checkbox" id="checkbox123" class="LP-LinkAdd__Trigger"/>
|
||||
<li class="LP-LinkList__Item">
|
||||
<input type="checkbox" id="checkbox123" class="LP-LinkAdd__Trigger" />
|
||||
<label for="checkbox123" class="LP-LinkAdd__TriggerLabel">
|
||||
<a class="LP-Link">
|
||||
<div class="RV-Iconized__Container RV-Iconized__Container--small">
|
||||
<svg class="RV-Iconized__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">
|
||||
<svg class="RV-Iconized__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" />
|
||||
|
||||
@ -43,7 +43,7 @@ $-spacing-large: 35px;
|
||||
|
||||
@mixin RV-Alignment--verticalCenter {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@mixin RV-Alignment--center {
|
||||
@ -106,7 +106,7 @@ $-spacing-large: 35px;
|
||||
@mixin RV-FlexRow__Container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
|
||||
&--multiRow {
|
||||
@include RV-FlexRow__Container--multiRow;
|
||||
@ -523,6 +523,7 @@ $-spacing-large: 35px;
|
||||
position: relative;
|
||||
top: .125em;
|
||||
}
|
||||
|
||||
&__Container--medium &__Icon{
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
|
||||
115
public/main.css
115
public/main.css
@ -20,17 +20,17 @@
|
||||
justify-content: center; }
|
||||
.RV-Alignment__Container--verticalCenter {
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
.RV-Alignment__Container--center {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
|
||||
.RV-FlexRow__Container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around; }
|
||||
height: 100%; }
|
||||
.RV-FlexRow__Container--multiRow {
|
||||
flex-wrap: wrap; }
|
||||
.RV-FlexRow__Container--column {
|
||||
@ -59,12 +59,12 @@
|
||||
justify-content: center; }
|
||||
.RV-FlexRow__Item__Container--verticalCenter {
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
.RV-FlexRow__Item__Container--center {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
.RV-FlexRow__Item, .RV-FlexRow__Item--normal {
|
||||
flex-grow: 3;
|
||||
flex-shrink: 3; }
|
||||
@ -111,12 +111,12 @@
|
||||
justify-content: center; }
|
||||
.RV-FlexGrid__Item__Container--verticalCenter {
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
.RV-FlexGrid__Item__Container--center {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
|
||||
.RV-ContentCrop__Container, .RV-ContentCrop__Container * {
|
||||
overflow: hidden;
|
||||
@ -380,12 +380,12 @@
|
||||
justify-content: center; }
|
||||
.RV-ImageGrid__Item__Container--verticalCenter {
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
.RV-ImageGrid__Item__Container--center {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
|
||||
.RV-ImageGrid__Container {
|
||||
padding: 25px; }
|
||||
@ -1009,7 +1009,8 @@ body {
|
||||
margin-top: 50px; }
|
||||
|
||||
.LP-LinkList {
|
||||
padding: 10px; }
|
||||
padding: 10px;
|
||||
align-items: center; }
|
||||
.LP-LinkList__Container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
@ -1034,12 +1035,12 @@ body {
|
||||
justify-content: center; }
|
||||
.LP-LinkList__Item__Container--verticalCenter {
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
.LP-LinkList__Item__Container--center {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
.LP-LinkList__Container {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
@ -1062,22 +1063,85 @@ body {
|
||||
.LP-LinkList .LP-LinkList__Item {
|
||||
border-left: 1px solid #C09F80;
|
||||
width: calc(100% - 1px);
|
||||
overflow: hidden; }
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%; }
|
||||
.LP-LinkList .LP-LinkList__Item--multiRow {
|
||||
flex-wrap: wrap; }
|
||||
.LP-LinkList .LP-LinkList__Item--column {
|
||||
display: flex;
|
||||
flex-direction: column; }
|
||||
.LP-LinkList .LP-LinkList__Item .LP-LinkList__ItemHover {
|
||||
opacity: 0.5;
|
||||
display: grid;
|
||||
justify-content: end;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
width: min-content;
|
||||
flex-basis: min-content; }
|
||||
.LP-LinkList .LP-LinkList__Item:hover {
|
||||
background-color: #f9f9f9; }
|
||||
.LP-LinkList .LP-LinkList__Item:hover .LP-LinkList__ItemHover {
|
||||
opacity: 1; }
|
||||
.LP-LinkList .LP-Link {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
.LP-LinkList .LP-Link > * {
|
||||
min-width: min-content;
|
||||
width: 100%;
|
||||
padding: 10px; }
|
||||
.LP-LinkList .LP-Link > *__Container {
|
||||
.LP-LinkList .LP-Link__Container {
|
||||
display: grid; }
|
||||
.LP-LinkList .LP-Link__Container--top {
|
||||
display: grid;
|
||||
align-content: start; }
|
||||
.LP-LinkList .LP-Link__Container--bottom {
|
||||
display: grid;
|
||||
align-content: end; }
|
||||
.LP-LinkList .LP-Link__Container--left {
|
||||
display: grid;
|
||||
justify-content: start; }
|
||||
.LP-LinkList .LP-Link__Container--right {
|
||||
display: grid;
|
||||
justify-content: end; }
|
||||
.LP-LinkList .LP-Link__Container--horizontalCenter {
|
||||
display: grid;
|
||||
justify-content: center; }
|
||||
.LP-LinkList .LP-Link__Container--verticalCenter {
|
||||
display: grid;
|
||||
align-items: center; }
|
||||
.LP-LinkList .LP-Link__Container--center {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-items: center; }
|
||||
.LP-LinkList .LP-Link, .LP-LinkList .LP-Link--normal {
|
||||
flex-grow: 3;
|
||||
flex-shrink: 3; }
|
||||
.LP-LinkList .LP-Link--narrower {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 5; }
|
||||
.LP-LinkList .LP-Link--narrow {
|
||||
flex-grow: 2;
|
||||
flex-shrink: 4; }
|
||||
.LP-LinkList .LP-Link--wide {
|
||||
flex-grow: 4;
|
||||
flex-shrink: 2; }
|
||||
.LP-LinkList .LP-Link--wider {
|
||||
flex-grow: 5;
|
||||
flex-shrink: 1; }
|
||||
.LP-LinkList .LP-Link--fixedSize {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
width: min-content;
|
||||
flex-basis: 100px; }
|
||||
.LP-LinkList .LP-Link__Container {
|
||||
gap: 10px; }
|
||||
.LP-LinkList .LP-LinkAdd {
|
||||
height: 0; }
|
||||
.LP-LinkList .LP-LinkAdd__Container {
|
||||
position: relative;
|
||||
top: -15px; }
|
||||
top: -39px; }
|
||||
.LP-LinkList .LP-LinkAdd__Container .LP-Form__Fieldset {
|
||||
min-width: unset; }
|
||||
.LP-LinkList .LP-LinkAdd__Container .LP-Form {
|
||||
@ -1091,7 +1155,8 @@ body {
|
||||
display: none; }
|
||||
|
||||
.LP-LinkAdd__TriggerLabel {
|
||||
cursor: pointer; }
|
||||
cursor: pointer;
|
||||
display: contents; }
|
||||
|
||||
.LP-LinkAdd__Trigger:checked, .LP-LinkAdd__Trigger:checked + .LP-LinkAdd__TriggerLabel {
|
||||
display: none; }
|
||||
@ -1168,7 +1233,7 @@ body {
|
||||
.LP-Form .LP-Form__Composition {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
padding: 10px; }
|
||||
.LP-Form .LP-Form__Composition--multiRow {
|
||||
flex-wrap: wrap; }
|
||||
@ -1208,12 +1273,12 @@ body {
|
||||
justify-content: center; }
|
||||
.LP-Form .LP-Form__Field__Container--verticalCenter {
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
.LP-Form .LP-Form__Field__Container--center {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
.LP-Form .LP-Form__Field, .LP-Form .LP-Form__Field--normal {
|
||||
flex-grow: 3;
|
||||
flex-shrink: 3; }
|
||||
@ -1265,12 +1330,12 @@ body {
|
||||
justify-content: center; }
|
||||
.LP-ImageGrid__Item__Container--verticalCenter {
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
.LP-ImageGrid__Item__Container--center {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
.LP-ImageGrid__Container {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user