From 6c5ce4a6ee80b3b13f5ec14abc3b23339bcd8dc6 Mon Sep 17 00:00:00 2001 From: reverend Date: Sat, 2 Oct 2021 08:25:37 +0200 Subject: [PATCH] A few transitions to amek things look fancier --- components/01_Atoms/link/link.hbs | 2 -- components/01_Atoms/tag/_tag.scss | 1 + .../02_Molecules/navigation/_navigation.scss | 1 + .../03_Organisms/imageGrid/_imageGrid.scss | 18 ++++++++++++++++-- .../03_Organisms/linkList/_linkList.scss | 1 + 5 files changed, 19 insertions(+), 4 deletions(-) diff --git a/components/01_Atoms/link/link.hbs b/components/01_Atoms/link/link.hbs index 3384e05..97f2e8f 100644 --- a/components/01_Atoms/link/link.hbs +++ b/components/01_Atoms/link/link.hbs @@ -1,5 +1,3 @@

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr {{text}} - sanctus est Lorem ipsum dolor sit amet

\ No newline at end of file diff --git a/components/01_Atoms/tag/_tag.scss b/components/01_Atoms/tag/_tag.scss index ee94ce3..f1698d4 100644 --- a/components/01_Atoms/tag/_tag.scss +++ b/components/01_Atoms/tag/_tag.scss @@ -6,6 +6,7 @@ @include RV-FlexRow__Container; height: min-content; gap: 3px; + transition: background .3s; &__Remove { .RV-Iconized__Icon { diff --git a/components/02_Molecules/navigation/_navigation.scss b/components/02_Molecules/navigation/_navigation.scss index edd0f15..bed219b 100644 --- a/components/02_Molecules/navigation/_navigation.scss +++ b/components/02_Molecules/navigation/_navigation.scss @@ -43,6 +43,7 @@ text-align: left; margin-bottom: 10px; padding-left: 25px; + transition: background .2s; &--additional{ background-color: #ccc; diff --git a/components/03_Organisms/imageGrid/_imageGrid.scss b/components/03_Organisms/imageGrid/_imageGrid.scss index 7316745..7d72026 100644 --- a/components/03_Organisms/imageGrid/_imageGrid.scss +++ b/components/03_Organisms/imageGrid/_imageGrid.scss @@ -14,6 +14,7 @@ position: relative; display: block; background: $-almost-white; + transition: background .3s; .LP-Icon { width: $-spacing-large; @@ -38,8 +39,9 @@ position: absolute; top: $-spacing-small; right: $-spacing-small; - background-color: $-light-brown; + background-color: transparent; border-radius: 50%; + transition: background .2s; height: $-spacing-large; width: $-spacing-large; @@ -54,6 +56,7 @@ } &__Item>.LP-Link:hover + &__DeleteItem, &__DeleteItem:hover { + background-color: $-light-brown; visibility: visible; } @@ -118,4 +121,15 @@ visibility: visible; opacity: 1; } -} \ No newline at end of file +} + +.LP-Select { + display: block; + cursor: pointer; + transition: box-shadow .3s; +} + +.LP-Select:checked, :checked + .LP-Select, .LP-Select--active { + box-shadow: 0 0 3px 3px #C09F80; +} + \ No newline at end of file diff --git a/components/03_Organisms/linkList/_linkList.scss b/components/03_Organisms/linkList/_linkList.scss index 0c1aaa8..be93cd2 100644 --- a/components/03_Organisms/linkList/_linkList.scss +++ b/components/03_Organisms/linkList/_linkList.scss @@ -8,6 +8,7 @@ border-left: 1px solid $-light-brown; width: calc(100% - 1px); overflow: hidden; + transition: background .3s, color .5s; @include RV-Alignment--verticalCenter; @include RV-FlexRow__Container;