diff --git a/components/03_Organisms/linkList/_linkList.scss b/components/03_Organisms/linkList/_linkList.scss index 9ddc88c..0c1aaa8 100644 --- a/components/03_Organisms/linkList/_linkList.scss +++ b/components/03_Organisms/linkList/_linkList.scss @@ -2,23 +2,34 @@ @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; - >* { - @include RV-Spacing__Inner--small; - } + .LP-Link { + @include RV-FlexRow__Item; + @include RV-Spacing__Inner--small; } .LP-LinkAdd{ @@ -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{ diff --git a/components/03_Organisms/linkList/linkList.hbs b/components/03_Organisms/linkList/linkList.hbs index ad096a8..0ed0095 100644 --- a/components/03_Organisms/linkList/linkList.hbs +++ b/components/03_Organisms/linkList/linkList.hbs @@ -1,63 +1,66 @@
-
- -
  • - - -
    - -
    -
    - Basic data -
    -
    - -
    -
    -
    - - -
    -
    -
    -
    -
    -     -
    -
    • - + + + Link hinzufügen + + + +
    + +
    +
    + Basic data +
    +
    + +
    +
    +
    + + +
    +
    +
    +
    +
    +     +
    + + \ No newline at end of file diff --git a/components/rcss.bundled.scss b/components/rcss.bundled.scss index 5e2b117..de37d40 100644 --- a/components/rcss.bundled.scss +++ b/components/rcss.bundled.scss @@ -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; diff --git a/public/main.css b/public/main.css index 9c0cc2a..31ae191 100644 --- a/public/main.css +++ b/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 > * { - padding: 10px; } - .LP-LinkList .LP-Link > *__Container { - gap: 10px; } + min-width: min-content; + width: 100%; + padding: 10px; } + .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;